You can try below site for your reference
https://angular.io/guide/dynamic-form
https://medium.com/@krishnaregmi/how-to-create-dynamic-forms-in-angular-7-using-formcontrol-a443a2c5e3a9
Example:
If you are having n items like formValues = [{label: 'a',value:'a'},{label: 'b',value:'b'},{label: 'c',value:'c'}]
You need to create your formGroup with this first
form: FormGroup;
formValues = [{label: 'a',value:'a'},{label: 'b',value:'b'},{label: 'c',value:'c'}]
toFormGroup(arr:any) {
let group={};
arr.forEach((x) => {
group[x.label]=new FormControl(x.value);
});
this.form = new FormGroup(group);
}
this will create a formgroup with dynamic keys you have
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div *ngFor="let element of formValues ">
<input type="text" formControlName="{{element.label}}" value="{{element.value}}"/>
</div>
<input type="submit" value="save"/>
</form>
I think this will help you
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…