使用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