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

【问题标题】：How to create a form dynamically based on a list of ever changing values如何根据不断变化的值列表动态创建表单
【发布时间】：2025-12-06 22:35:01
【问题描述】：

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

【问题讨论】：

标签： angular angular-forms

【解决方案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>

【讨论】：

谢谢。这似乎创建了一个表单控件数组。但是我怎么能在 html 上使用它，就像使用这个 html 一样？另外，以及如何将其与相应的 for 循环一起使用的想法。这些 FormControll 会有我可以使用的名称吗？谢谢
谢谢老哥，不胜感激