Rafael, think in FormArray
First create a function that return a formGroup, and a variable that was a FormArray
formArray:FormArray;
createGroup(data:any)
{
data=data || {serie:0,repetition:0,weigth:0}
return new FormGroup({
serie:new FormControl(data.serie),
repetition:new FormControl(data.repetition),
weigth:new FormControl(data.weigth),
}))
}
second in a ngOnInit create the formArray using your array exercises. You can loop over exercises and use push or use map
ngOnInit()
{
this.formArray=new FormArray(this.exercises.map(x=>{
return this.createGroup(null)
})
}
You simple iterate over FormArray.controls.(*)
<form *ngIf="formArray" [formGroup]="formArray" (submit)="submit(formArray)">
<div *ngFor="let group of formArray.controls;let i=index" [formGroup]="group">
{{exercises[i]}}
<input formControlName="serie">
<input formControlName="repetition">
<input formControlName="weigth">
</div>
<button type="submit">submit</button>
</form>
You can see the code in stackblitz
(*)Yes, there're severals ways to iterate over a FormArray. The clasic is a FormArray in a FormGroup and we use
<form [formGroup]="formGroup">
<div formArrayName="formArray">
<div *ngFor="let group of formGroup.get('formArray').controls; let i = index;"
[formGroupName]="i">
<input formControlName="...">
<input formControlName="...">
...
</div>
</div>
</form>
But if we has only a formArray, we can simply loop over formArray.controls and indicate that the [formGroup] is the variable over we iterate. We are replacing [formGroupName]="i" by [formGroup]="group"
FormArray. This allows a dynamic number ofFormControlto be captured.valueattribute on input to show ?