Inform the child component that it is a part of the parent component's Angular FormGroup

Question

I have a FormGroup that reference some of its field to another component that makes it its child. However, I am getting this error whenever I am on the rendering stage of the child

Error: formControlName must be used with a parent formGroup directive.  You'll want to add a formGroup...

This is a generic error when you include a formControlName property on a field outside the FormGroup. I have make sure that the parent rendered first the FormGroup before its child, and by right, that's the default behaviour.

Parent HTML is something like this.

<form [formGroup]="form.formGroup" #formDirective="ngForm" (ngSubmit)="saveForm(formDirective)">
      <input matInput formControlName="form.mainInputControl" placeholder="This one doesn't have a problem" type="text">
      <child-component [details]="form.detailsForChild"></child-component>
</form>

Child HTML is something like this

<mat-checkbox formControlName="detailsForChild.checkBoxControl"></mat-checkbox>

PS: That's not real variable name, I just do it so it will be intuitive.

Answer 1

So, contrary to what I had assumed, the Child and Parent Components cannot be mixed up during runtime.

Therefore, I had to provide the precise FormGroup to the child and bind it to the element one level higher where the "formControlName" is defined.

So from the example:

Parent

<form [formGroup]="form.formGroup" #formDirective="ngForm" (ngSubmit)="saveForm(formDirective)">
      <input matInput formControlName="form.mainInputControl" placeholder="This one doesn't have a problem" type="text">
      <child-component [details]="form.detailsForChild" [parentForm]="form.formGroup"></child-component>
</form>

Child

<ng-container [formGroup]="parentForm">
    <mat-checkbox formControlName="detailsForChild.checkBoxControl"></mat-checkbox>
</ng-container>

Reference: Here