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.

Rich · Accepted Answer · 2022-09-28 10:34:04Z

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

surendra kumar · Accepted Answer · 2020-06-26 05:42:04Z

You need to add formControlName

<child-component formControlName="form.detailsForChild"></child-component>

You need to write the below code in child component

import {ControlContainer, FormControl} from '@angular/forms';

@Component({
  // Ensure we either have a [formControl] or [formControlName] with our child-component
  selector: '[formControl] child-component,[formControlName] child-component',
  templateUrl: './address-editor.component.html'
})
export class ChildComponent implements OnInit {
  public checkBoxControl: FormControl;

  // Let Angular inject the control container
  constructor(private controlContainer: ControlContainer) { }

  ngOnInit() {
    // Set our addressFormGroup property to the parent control
    // (i.e. FormGroup) that was passed to us, so that our
    // view can data bind to it
    this.checkBoxControl = this.controlContainer.control;
  }
}

//Child component code
<mat-checkbox formControlName="checkBoxControl"></mat-checkbox>

For more info click on the link

Vna · Accepted Answer · 2020-06-26 07:02:28Z

Add the formGroup in child component also

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 [parentFormGroup]="form.formGroup" [details]="form.detailsForChild"></child-component>
</form>

Child

<div [formGroup]="parentFormGroup">
    <mat-checkbox formControlName="detailsForChild.checkBoxControl"></mat-checkbox>
</div>

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related