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
– Eliseo, Commented Oct 3, 2019 at 8:31
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
– user10591888, Commented Oct 3, 2019 at 8:34

Eliseo · Accepted Answer · 2019-10-03 10:18:17Z

6

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

edited Oct 3, 2019 at 10:18

answered Oct 3, 2019 at 8:45

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Eliseo Over a year ago

I updated again the answer and the stackblitz. choose whatever you want, loop over params or over controls, but is you want to add a label, you need correlation the params and the index

user10591888 Over a year ago

Can you please help me with one more query?

Eliseo Over a year ago

which query? I'll try it

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related