角度9如何从从数据数组中提取的索引自动生成反应式表单控件？ [英] Angular 9 How to generate reactive form controls automatically from indexes extracted from an array of data?

问题描述

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

假设我有以下数组：

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并创建2form control namesWITHformControlName='name'和FOR性别。

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

推荐答案

您现在可以简单地创建数组值的Form Group basefieldFormItems将是Form Groups的数组

组件

  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 🚀

这篇关于角度9如何从从数据数组中提取的索引自动生成反应式表单控件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！