Let know Child Component that it is part of FormGroup of Parent Component Angular

user_2637261 0
Viewed 993

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.

angular-reactive-forms angular components forms
3 Answers

So apparently, the Child and Parent Component cannot be mixed up on the runtime as what I am thinking will it be.

So I needed to pass the exact FormGroup to the Child and bind it to one step higher element where does the formControlName lies on.

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

user_26372610

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

user_60389190

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>
user_94283750
Related