Add dynamic properties in the formBuilder.group reactive forms in angular

Question

I am using angular reactive forms and I have form structure like below.

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

I want to add dynamic properties(form controls) inside params formGroup. Below is the code I used but it's giving empty controls object.

ts file

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('');
}

template file

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

Can anyone please help me to create the same structure?

for add a control to a formGroup use 'addControl' angular.io/api/forms/FormGroup#addcontrol, e.g. this.exerciseForm.addControl('temp',new FormControl('')) — Eliseo
Not working. Input fields are not rendering on UI. And control is also not adding. Do I need to change anything in HTML template? — user10591888

Eliseo Eliseo · Accepted Answer · 2019-10-03T08:45:13

//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()
  );
});

see stackblitz

Updated: the .html like

<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 }}
</pre>

*Update 2 to avoid errors We can add an *ngIf to the input

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

Another aproach is loop over controls using keypipe value

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

Add dynamic properties in the formBuilder.group reactive forms in angular

1 Answers