如何在表单中设置动态字段及其值

Question

• 我正在使用角形控件。
• 我有一组要在表单中显示的值，很少是静态的，很少是动态的。
• 我正在使用 formControlName 和 ts 文件显示静态值 如下在 fb 组中接收。

对于已知值，我执行以下操作。

HTML 文件

<input type = "text" formControlName="catalogItemId">

Ts 文件

this.catalog Form = this.fb.group({
catalogItemId:fb.control('').
.
.
so on
})

对于动态值（未知值），我正在循环如下（因为我不知道这里会出现什么字段）。

<mat-list-item *ngFor="let data of attributeMap | keyvalue">
     <mat-form-field>
         <mat-label>{{data.key}}</mat-label>
         <input matInput type="text" value = {{data.value}}
     </mat-form-field>
</mat-list-item>

现在的问题是如何在我的表单组中获取这些动态值（即 this.catalog Form ）

我以前没有使用过表单构建器，我正在查看许多文章以消除这个疑问。 希望有解决方案。在此先感谢。

Answer 1

您可以在表单上使用 addControl()，为其提供两个参数（控件的名称和创建的控件）。 由于您可能只想在模板中循环动态控件，因此我建议您在表单中创建一个嵌套表单组，以将其与表单的静态控件隔离。

this.catalogForm = this.fb.group({
 catalogItemId:fb.control(''),
 dynamicControls: this.fb.group({})
});

addDynamicValues() {
 for (let key in attributeMap) {
  (this.catalogForm.get('dynamicControls') as FormGroup).addControl(key, this.fb.control(attributeMap[key]))
  }
}

然后在模板中：

<form [formGroup]="catalogForm">
 <section formGroupName="dynamicControls">
  <ng-container *ngFor=let control of catalogForm.get('dynamicControls').controls | keyvalue">
   <mat-form-field>
    <mat-label>{{control.key}}</mat-label>
    <input matInput type="text" [formControlName]="control.key"
   </mat-form-field>
 </ng-container>
</section>
</form>

Working example on stackblitz