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"]

Теперь мне нужно l oop сверх this.result и создать 2 form control names с formControlName='name' и для пола.

Как только l oop закончен и элементы управления формой созданы, мне нужно отобразить его на экране. Вот 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

демонстрация ?