如何根据不断变化的值列表动态创建表单

Question

我正在从后端获取一个对象列表，其中的显示名称和显示值会根据不同的请求而变化。我可以使用简单的 *ngFor ... {{object.displayName)): {{object.value}}... 但是我需要把这个页面做成一个表格。所以我的问题是如何创建 x 个 FormControls，每个 FormControls 的值都是 {{object.displayName}} ？然后使用上面的 for 循环将 displayName 与 FormControl 匹配。我看过使用 FormArray 但无法动态创建

Answer 1

您需要创建一个空的 FormArray，然后从后端迭代数据并推送 FormCntrols。

 form: FormGroup;
 dataFromBackend: [];

 constructor(private formBuilder: FormBuilder) { }

 this.form = this.formBuilder.group({
      array: this.formBuilder.array([
      ])
    });

ngOnInit() {

  const control = <FormArray>this.form.get('array');

  for (const item of dataFromBackend) {
          control.push(new FormControl(item));
  }
}

编辑

添加HTML

<form [formGroup]="form">
            <table>
                <thead>
                    <th>Name</th>
                    <th>Value</th>
                </thead>
                <ng-container formArrayName="ponderacionFactor">
                <tbody *ngFor="let item of form.get('array')['controls']; let i = index" [formGroupName]="i">
                    <td>{{item.name}}</td>
                    <td>{{item.value}}</td>
                </tbody>
                </ng-container>
            </table>        
</form>

如何根据不断变化的值列表动态创建表单

How to create a form dynamically based on a list of ever changing values

angular

angular-forms