Question

我从后端获取具有显示名称和显示值的对象列表，该对象列表会根据不同的请求而变化。我可以使用简单的* ngFor ... {{object.displayName））：{{object.value}} ...显示此信息。但是我需要将该页面制作成表格。因此，我的问题是如何创建数量为{{object.displayName}}的x个FormControls作为值？然后使用上面的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>

如何基于不断变化的值列表动态创建表单

1 个答案: