I am currently working on a dynamic form group and I am facing a particular challenge.
https://i.sstatic.net/m20IO.png
Whenever I click on "add more," it should add 2 dynamic fields. Here is the function I am using:
onAddSurgeries(){
const control = new FormGroup({
'surgery': new FormControl(null),
'illness': new FormControl(null)
});
(<FormArray>this.form.get('surgeries')).push(control);
}
This is how my HTML code looks:
<tr *ngFor="let ctrl of form.get('surgeries')['controls']; let i = index">
<td><input type="text" class="form-control" [formControlName]="ctrl['controls'].surgery"></td>
<td><input type="text" class="form-control" [formControlName]="ctrl['controls'].illness"></td>
</tr>
I am aware that I am making a mistake by using "ctrl['controls'].surgery" as the formControlName. Instead, I should use "i" as formcontrolname when I have only one formcontrol instead of 2 controls in a formgroup. However, in this scenario, I am unsure of what to enter in the formControlName because when I submit the form, the values of both inputs are empty as they are not synced with the formgroup controls.