Angular 9 如何根据从数据数组中提取的索引自动生成响应式表单控件？

Question

我正在尝试根据从数据数组中提取的索引创建反应形式。

假设我有以下数组：

array = [
  { name: 'Ali', gender: 'Male' },
  { name: 'Sara', gender: 'Female' }
];

我提取的索引如下：

this.result = new Set(this.array.flatMap(e => Object.keys(e), []));
this.result = Array.from(this.result);

结果：

console.log(this.result)
// ["name", "gender"]

现在我需要遍历 this.result 并创建 2 form control names formControlName='name' 和性别。

循环完成并创建表单控件后，我需要在屏幕上显示它。这是关于它的stackblitz。

Answer 1

您现在可以简单地创建一个基于数组值的 formGroup fieldFormItems 将是一个 formGroups 的数组

分量

  createForm() : void{
    this.fieldForm = this.formBuilder.group({
      fieldFormItems: this.formBuilder.array(
        this.array.map(values =>{
          return this.formBuilder.group(values)
        })
      )
    })
  }

模板

<div [formGroup]="fieldForm">
    <div formArrayName="fieldFormItems">
      <div *ngFor="let fg of fieldForm.get('fieldFormItems').controls" [formGroup]="fg" >
          <input formControlName="name">
          <input formControlName="gender">
      </div>
    </div>
</div>

已更新 ✨

动态获取表单控件‍♂️

div [formGroup]="fieldForm">
    <div formArrayName="fieldFormItems">
        <div *ngFor="let fg of fieldForm.get('fieldFormItems').controls" [formGroup]="fg">
            <ng-container *ngFor="let fc of fg.controls | keyvalue">
                <input type="text" [formControl]="fc.value">
      </ng-container>
    </div>
    </div>
</div

demo

Angular 9 如何根据从数据数组中提取的索引自动生成响应式表单控件？

Angular 9 How to generate reactive form controls automatically from indexes extracted from an array of data?

arrays

angular

angular-reactive-forms

formgroups