When attempting to nest multiple FormGroups, everything works smoothly if the template is not extracted into separate components.
For instance, the following example functions as expected:
Template
<form [formGroup]="baseForm">
<div formGroupName="nestedForm1">
<div formGroupName="nestedForm2">
<input formControlName="nestedControl">
</div>
</div>
</form>
Typescript
this.baseForm = this.formBuilder.group({
nestedForm1: this.formBuilder.group({
nestedForm2: this.formBuilder.group({
nestedControl: ["Default Value"]
})
})
});
However, when attempting to move "nestedForm1" and "nestedForm2" into separate components, issues arise beyond the first level of nesting.
To see an example and experiment with both approaches, you can visit the following link. You can toggle between the two methods by commenting out specific code segments in the "app.component.html" file.