使用 FormBuilder Angular 2 绑定标签值

Question

我有一个角形式（反应形式）和一个后端服务。该服务告诉我用户界面中可以有多少个复选框以及标签及其值。

我想知道如何将标签值绑定到 UI。由于我正在获取所有数据，但不确定如何在使用 FormBuilder 时绑定标签。这是我的代码。

所以我的数据如下所示：-

[
  {
    "facility_module_id": null,
    "module_id": "PM001",
    "module_name": "User management ",
    "mandatory_flag": 1,
    "parent_moduleId": null
  },
  {
    "facility_module_id": null,
    "module_id": "PM002",
    "module_name": "Library Management",
    "mandatory_flag": 1,
    "parent_moduleId": null
  },
  {
    "facility_module_id": null,
    "module_id": "PM003",
    "module_name": "Settings Management",
    "mandatory_flag": 1,
    "parent_moduleId": null
  }]

我的表单生成器如下所示：-

this.form = this._fb.group({
      'clientName': ['', [Validators.required, ValidationService.isAlphabetNSpace]],
      'hospitalGroup': ['', [Validators.required, ValidationService.isAlphabetNSpace]],
      'addressLineOne': ['', Validators.required],
      'addressLineTwo': ['', Validators.required],
      'city': ['', Validators.required],
      'state': ['', Validators.required],
      'postalCode': ['', Validators.required],
      'deployment': ['', Validators.required],
      'details': this._fb.array([
        this.initDetails()
      ]),
      'modules': this._fb.array([
      ])
    });

我要说的FormGroup在这里

initModules(data) {
    return this._fb.group({
      'moduleName': [data.facility_module_id],
      'moduleCheck': [data.mandatory_flag]
    });
  }

现在问题是我希望模块名称是一个标签，但不知道如何将数据与带有标签的前端绑定。

请告诉我如何使用 FormBuilder 将数据绑定到标签。 我的复选框如下所示：-

<app-wizard-section title="Module Selection">
  <div formArrayName="modules">
    <div class="col-lg-3" *ngFor="let module of form.controls.modules.controls; let i=index">
      <div class="panel-body" [formGroupName]="i">
        <input class="checkbox-custom" type="checkbox" id="cb-{{i}}" formControlName="moduleCheck">
        <label for="cb-{{i}}" class="checkbox-custom-label">My Patients</label>
      </div>
    </div>
  </div>
</app-wizard-section>

Answer 1

假设您的代码有效，标签可以简单地与您的 formControlName 中的相同变量绑定。例如，如果你想显示复选框输入的值，你会这样做：

<app-wizard-section title="Module Selection">
  <div formArrayName="modules">
    <div class="col-lg-3" *ngFor="let module of form.controls.modules.controls; let i=index">
      <div class="panel-body" [formGroupName]="i">
        <input class="checkbox-custom" type="checkbox" id="cb-{{i}}" formControlName="moduleCheck">
        <label for="cb-{{i}}" class="checkbox-custom-label">{{module.get('CONTROL').value}}</label> 
        // I dont like calling methods in double binding, so I would just save the value in a variable in your controller when your checkbox input (changes)'s
      </div>
    </div>
  </div>
 </app-wizard-section>

我在我的表单中做同样的事情，看起来我们一直在使用相同的指南。您可以使用与控制器中的变量类似的 moduleCheck formControlName。

我通过输入指令来编辑我的一些表单值。例如，如果我的表单中有一个文本信用卡输入，我会创建一个信用卡指令，该指令将操纵输入并将其推出以由表单动态验证。此外，您可以使用所需的任何事件指令对输入值调用修饰符

(keydown)="changeFormInputValue($event)"

changeFormInputValue(ev) {
  if (this.YOURFORMCONTROLNAME.value.length > 1) {
    this.YOURFORMCONTROLNAME.clearAsyncValidators();
    this.YOURFORMCONTROLNAME.patchValue('NEW Value goes here');
  } 
}

供参考：https://angular.io/docs/ts/latest/guide/reactive-forms.html