如何在 ngFor 循环中动态定义 formControl 名称？答案

【问题标题】：How to dynamically define formControl name within ngFor loop?如何在 ngFor 循环中动态定义 formControl 名称？
【发布时间】：2018-05-16 14:57:16
【问题描述】：

我想根据对象中包含的项目动态填充字段。我正在使用带有角材料的反应形式。

但是，我得到：

错误：找不到具有未指定名称属性的控件

<div *ngFor="let field of guidelines.fields; let i=index">
  <mat-form-field>
    <input [formControl]="i" ngDefaultControl matInput placeholder={{field.field_name}} value={{field.notes}}>
  </mat-form-field>
</div>

【问题讨论】：

标签： angular angular-material

【解决方案1】：

使用表单组：

HTML

<div [formGroup]="form" class="edit-guidelines">
  <div mat-dialog-content>
    <h2>Edit Guidelines</h2>
    <h3>{{guidelines.tab_name}}</h3>
    <div *ngFor="let field of guidelines.fields; let i=index">
      <mat-form-field>
        <input [formControlName]="field.field_name" ngDefaultControl matInput placeholder={{field.field_name}} value={{field.notes}}>
      </mat-form-field>
    </div>
  </div>
  <div mat-dialog-actions>
    <span class="right-align-next-element"></span>
    <button class="secondary-btn" mat-button (click)="closeModal()">Cancel</button>
    <button class="primary-btn" mat-button (click)="updateGuideline()" cdkFocusInitial>Update Manufacturer</button>
  </div>
</div>

getGuideline() {
    this.guidelines = this.data.tabObj[0];
    console.log(this.guidelines);
    this.form = this.createGroup();
  }

  createGroup() {
    const group = this.fb.group({});
    this.guidelines.fields.forEach(control => group.addControl(control.field_name, this.fb.control('')));
    return group;
  }

【讨论】：

如何为特定表单控件添加 Validators.required 或 Validators.min 等以及 Validators 的变体？（就像你在这里所做的那样动态地）
需要注意的是，循环em的时候不会在元素上看到formControlName。

【解决方案2】：

[formControl] 指令将 FormControl 作为值，并且您传递给它一个数字，因此 找不到具有未指定名称属性的控件。我将有一个包装数组或一个单独的数组，以便按索引访问 formControls：

const wrappingArray = guidelines.fields.map(field => ({formControl, ...field}));

并使用它

<div *ngFor="let field of wrappingArray; let i=index">
  <mat-form-field>
    <input [formControl]="field.formControl" ngDefaultControl matInput placeholder={{field.field_name}} value={{field.notes}}>
  </mat-form-field>
</div>

或者用一个单独的数组

const formControls = [formControl1, ... formControlN];

并使用它

<div *ngFor="let field of guidelines.fields; let i=index">
  <mat-form-field>
    <input [formControl]="formControls[i]" ngDefaultControl matInput placeholder={{field.field_name}} value={{field.notes}}>
  </mat-form-field>
</div>

【讨论】：