时间戳

首页 > 解决方案 > 反应式形式的 NgxBootstrapSwitchModule

angular - 反应式形式的 NgxBootstrapSwitchModule

问题描述

总而言之，我正在尝试以反应形式使用 NgxBootstrapSwitchModule，但出现错误。

ERROR Error: No value accessor for form control with name: 'isQc2Enabled'
    at _throwError (forms.js:2627)
    at setUpControl (forms.js:2401)
    at FormGroupDirective.addControl (forms.js:5723)
    at FormControlName._setUpControl (forms.js:6298)
    at FormControlName.ngOnChanges (forms.js:6243)
    at FormControlName.rememberChangeHistoryAndInvokeOnChangesHook (core.js:1497)
    at callHook (core.js:2516)
    at callHooks (core.js:2483)
    at executeInitAndCheckHooks (core.js:2434)
    at selectIndexInternal (core.js:8368)

我的模板设置如下：

<div>
  <label>QC2 Enabled</label>
  <ngx-switch formControlName="isQc2Enabled" [onText]="'Yes'" [offText]="'No'" [onColor]="'blue'" [offColor]="'red'"></ngx-switch>
</div>

我的组件设置如下：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ProjectSettings } from 'src/app/models/project/project-settings.model';
import { PageTitleService } from 'src/app/services/page-title.service';
import { ProjectApiService } from 'src/app/services/project-api.service';
import { FormGroup, FormBuilder, Validators } from '@angular/forms'
import { User } from 'src/app/models/user.model';
import { ToastrService } from 'ngx-toastr';

@Component({
selector: 'app-project-settings',
templateUrl: './project-settings.component.html',
styleUrls: ['./project-settings.component.css']
})
export class ProjectSettingsComponent implements OnInit {

  projectId: number;
  model: ProjectSettings;
  projSettingsForm: FormGroup;
  isSubmitted: boolean = false;


  constructor(
    private route: ActivatedRoute,
    private pageTitleSvc: PageTitleService,
    private projectApiService: ProjectApiService,
    private fb: FormBuilder,
    private toaster: ToastrService
    ) { }

  get formControls() { return this.projSettingsForm.controls; }

  ngOnInit(): void {
    Promise.resolve(null).then(() => this.pageTitleSvc.updatePageTitle("Project Settings"));
    this.model = this.route.snapshot.data['projectSettings'];

    this.projSettingsForm = this.fb.group({
      name: [this.model.Name, [Validators.required]],
      code: [this.model.Code, [Validators.required]],
      description: this.model.Description,
      wikiLink: this.model.WikiLink,
      isQc2Enabled: this.model.IsQC2Enabled,
      // isActive: this.model.IsActive,
      researchManager: this.model.ResearchManagerId,
      reportingManager: this.model.ReportingManagerId,
      qc1Manager: this.model.QC1ManagerId,
      qc2Manager: this.model.QC2ManagerId,
      isOutOfStore: this.model.IsOutOfStore,
      managers: this.model.Managers,
    })

    this.route.params.subscribe(x => {
      this.projectId = x["id"];
    });
  }

  submitForm(): void {

    this.isSubmitted = true;

    if (this.projSettingsForm.invalid) {
      return
    }

    this.projectApiService.saveProjectSettings(this.projectId, this.model).subscribe(x => {
      this.toaster.success("Saved Project Settings Successfully.");
    }, error => {
      this.toaster.error(error.error.Message, "Unable to save Project Settings!");
    });

  }
}

有没有人能够以反应形式使用这个模块，如果没有，有没有你可以建议看起来和这个一样的好模块？

谢谢你！

标签： angularbuttontoggle

解决方案

我检查了这个ngx-bootstrap-switch组件的代码，并没有实现双向绑定。所以你不能用它formControlName

正如其文档所述，您必须将其与输入绑定一起使用，并通过添加和绑定事件方法来通知值更改

<div>
    <label>QC2 Enabled</label>
    <ngx-switch [status]="projSettingsForm.controls['isQc2Enabled']" [onText]="'Yes'" [offText]="'No'" [onColor]="'blue'" [offColor]="'red'"
      (statusChange)="onIsQc2EnabledChange($event)">
    </ngx-switch>
</div>

（我这里是用表单内容绑定的，你也可以直接绑定你的modelisQc2Enabled属性）

推荐阅读