The nested form structure I am working with is a 'triple level' setup: FormGroup->ArrayOfFormGroups->FormGroup
At the top level (myForm):
this.fb.group({
name: '',
description: '',
questions: this.fb.array([])
});
For the nested form array element 'questions':
this.fb.group({
priority: ['1'],
params: this.fb.group({parameter: ['']})
});
The 'params' nested form group element contains key:value pairs of varying lengths.
When iterating through elements, I use the following ngFor loop:
<tr *ngFor="let questionConfigForm of myForm.controls.questions.controls; let i=index" [formGroupName]="i">
...
<div *ngFor="let param of objectKeys(questionConfigForm.controls.params.controls)" formGroupName="params">
<input type="text" [formControlName]="param">
However, I've encountered an issue: Changes made to fields in the first two levels of the form are immediately reflected in the corresponding form control values when {{myForm.value | json}} is checked. But changes to the 'params' controls do not update the overall myForm values unless a change is made in the related 'questions' form.
It seems like the 'param' form control captures input data but fails to trigger an update event. I'm unsure how to resolve this issue other than creating a custom function to handle the updates when there is a (change) event and patchValue in the form..
So, my question remains: How can I ensure that changes in 'params' controls update myForm without experiencing this unexpected behavior?
Update:
initQuestionConfig() {
return this.fb.group({
priority: ['1'],
params: this.fb.group({parameter: ['']}),
});
}
addQuestionConfig() {
const control = <FormArray>this.myForm.controls['questions'];
const newQuestionCfg = this.initQuestionConfig();
control.push(newQuestionCfg);
}