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

Question

我正在使用 angular 表单控件。
我有一组值要在表格中显示，很少是静态的，很少是动态的。
我正在使用 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 表单）

我以前没有使用过表单生成器，我正在阅读许多文章来消除这个疑问。希望提前 solution.Thanks。

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

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

How to set dynamic fields and it values in form

angular

angular-forms

form-control

angular-formbuilder

对于已知值，我做如下。

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