My form structure is organized in the following way...
this.myForm = this.formBuilder.group({
control1: this.formBuilder.control({value: ''}),
groupcontrol1: this.formBuilder.array({this.addGroupControl()});
});
addGroupControl(): FormGroup {
return this.formBuilder.group({
recurringControl1: this.formBuilder.control({value: ''}),
recurringControl2: this.formBuilder.control({value: ''}),
recurringControl3: this.formBuilder.control({value: ''}),
});
});
In the HTML, there's a button to add groups to this array, which will look like this:
addGroups() {
(<FormArray>this.myForm.get('groupcontrol1')).push(this.addGroupControl());
}
This section displays my form structure in the HTML:
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
<label> control1</label>
<input type="text"/>
<button type="button" (click)="addGroups()"> Add Groups</button>
<accordion>
<accordion-group formArrayName="groupcontrol1"
*ngFor="let group of myForm.get('groupcontrol1').controls; let i = index">
<div accordion-heading>
Group Control {{ i + 1 }}
</div>
<div [formGroup]="i">
<input formControlName="recurringControl1" />
<input formControlName="recurringControl2" />
<input formControlName="recurringControl3" />
</div>
</accordion-group>
</accordion>
</form>
To track changes within the recurring controls, I utilize the following code snippet:
merge(
...this.myForm
.get('groupcontrol1')
.controls.map((eachGroup, index: number) =>
eachGroup.controls.recurringControl1.valueChanges
.pipe(map((value) => ({ rowIndex: index, control: eachGroup, data: value })))
)
).subscribe((changes) => {
console.log(changes);
});
However, currently, only the value change of 'recurringControl1' from the first form group is being captured. I am seeking recommendations or adjustments to precisely monitor the changed values of all three recurring controls across different form groups.