Добавить динамические свойства в formBuilder.group реактивных форм в угловых

Question

Я использую угловые реактивные формы, и у меня есть структура формы, как показано ниже.

{  
   "name": '',  
   "params": {}  
}

Я хочу добавить динамические свойства ( элементы управления формой ) внутри params formGroup. Ниже приведен код, который я использовал, но он дает пустой controls объект.

ts файл

exercise = {
    data:[
      {param: "Reps"},
      {param: "Tempo"}
    ],
};

{
   this.exerciseForm = this.formBuilder.group({
      name: ['', [Validators.required],
      params: this.formBuilder.group({})
   });
}

get getAllParams(){
  return this.exerciseForm.get('params') as FormGroup;
} 

addNewParam(){
  this.getAllParams[param] = this.formBuilder.control('');
}

файл шаблона

<div formGroupName="params" *ngFor="let param of exercise.data;">
    <input type="text" [formControlName]="param.param" />
</div>

Может кто-нибудь помочь мне создать такую ​​же структуру?

Answer 1

//At first only "name" and a formGroup "params" empty
this.exerciseForm = this.formBuilder.group({
  name: ["", [Validators.required]],
  params: this.formBuilder.group({})
});

this.exercise.data.forEach(param => {
  (this.exerciseForm.get("params") as FormGroup).addControl(
    param.param,
    new FormControl()
  );
});

см. stackblitz

Обновлено : .html как

<code><form [formGroup]="exerciseForm">
  <input formControlName="name">
  <div formGroupName="params">
  <div *ngFor="let param of this.exercise.data">
    <input [formControlName]="param.param">
  </div>
  </div>
</form>

<pre>
  {{exerciseForm?.value|json }}

* Обновление 2 во избежание ошибок. Мы можем добавить * ngIf ко входу

  <input *ngIf="exerciseForm.get('params.'+param.param)"
    [formControlName]="param.param">

Еще один подход - циклическое управление с использованием значения keypipe

<form [formGroup]="exerciseForm2">
  <input formControlName="name">
  <div formGroupName="params">
  <div *ngFor="let control of exerciseForm2.get('params').controls|keyvalue;let i=index">
    <input [formControl]="control.value">
  </div>
  </div>
</form>