Angular2 reactive forms : syncing FormArray with parent FormGroup
I have the same issue of updating parent formgroup whenever nested form array changes. Try to set parent property whenever form array changes. Hope it helps.
addItem(): void {
let fa = <FormArray>this.formGroup.get(this.formProperty)
let fb = this.CreateNewRow(this.schema);
fb.setParent(fa);
fa.controls.push(fb);
}
I played somewhat with your plunker, and found out the problem
When you assigned the new FormArray
after changing the size of it, you assigned it alone, not relating it correctly to the parent FormGourp
.
Using this.form.controls[<controlName>] = new FormControl/ FormArray/ FormGroup;
does not apply the parent
property to the new control.
That's why the values did not propagate to the parent until you "refreshed" the entire form value when updating one of the parent fields.
You can see in the plunker, I added some console.log
s for you to better understand.
I also added the correct way (in my opinion) to replace the value of the someArray
FormArray.
Using the official documentation helped a lot.
Hope this helps