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
  }]

My Form Builder如下所示： -

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

使用FormBuilder Angular 2绑定标签值

1 个答案: