40

I would like to pass the parent component's FormGroup to its child for the purpose of displaying an error-message using the child.

Given the following parent:

parent.component.ts

import { Component, OnInit } from '@angular/core'
import {
  REACTIVE_FORM_DIRECTIVES, AbstractControl, FormBuilder, FormControl, FormGroup, Validators
} from '@angular/forms'

@Component({
  moduleId: module.id,
  selector: 'parent-cmp',
  templateUrl: 'language.component.html',
  styleUrls: ['language.component.css'],
  directives: [ErrorMessagesComponent]
})
export class ParentCmp implements OnInit {
  form: FormGroup;
  first: AbstractControl;
  second: AbstractControl;
  
  constructor(private _fb: FormBuilder) {
    this.first = new FormControl('');
    this.second = new FormControl('')
  }
  
  ngOnInit() {
    this.form = this._fb.group({
      'first': this.first,
      'second': this.second
    });
  }
}

I would now like to pass the form:FormGroup variable above to the child component below:

error-message.component.ts

import { Component, OnInit, Input } from '@angular/core'
import { NgIf } from '@angular/common'
import {REACTIVE_FORM_DIRECTIVES, FormGroup } from '@angular/forms'

@Component({
  moduleId: module.id,
  selector: 'epimss-error-messages',
  template: `<span class="error" *ngIf="errorMessage !== null">{{errorMessage}}</span>`,
  styles: [],
  directives: [REACTIVE_FORM_DIRECTIVES, NgIf]  
})
export class ErrorMessagesComponent implements OnInit {
  @Input() ctrlName: string

  constructor(private _form: FormGroup) { }

  ngOnInit() { }

  get errorMessage() {
    // Find the control in the Host (Parent) form
    let ctrl = this._form.find(this.ctrlName);
    console.log('ctrl| ', ctrl);

//    for (let propertyName of ctrl.errors) {
//      // If control has a error
//      if (ctrl.errors.hasOwnProperty(propertyName) && ctrl.touched) {
//        // Return the appropriate error message from the Validation Service
//        return CustomValidators.getValidatorErrorMessage(propertyName);
//      }
//    }

    return null;
  }

The constructor formGroup represents the FormGroup of the parent - in its present form it does not work.

I am trying to follow this obsolete example at http://iterity.io/2016/05/01/angular/angular-2-forms-and-advanced-custom-validation/

2

8 Answers 8

54

In the parent component do this:

<div [formGroup]="form">
  <div>Your parent controls here</div>
  <your-child-component [formGroup]="form"></your-child-component>
</div>

And then in your child component you can get hold of that reference like so:

export class YourChildComponent implements OnInit {
  public form: FormGroup;

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

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

You can even ensure either formGroupName or [formGroup] is specified on your component by changing its selector like so:

selector: '[formGroup] epimss-error-messages,[formGroupName] epimss-error-messages'

This answer should be sufficient for your needs, but if you want to know more I've written a blog entry here:

https://mrpmorris.blogspot.co.uk/2017/08/angular-composite-controls-formgroup-formgroupname-reactiveforms.html

5
  • 4
    In Angular 8 this.controlContainer.control as FormGroup return the following error 'Argument of type 'AbstractControl' is not assignable to parameter of type 'FormControl''
    – Kosmonaft
    Jul 30, 2019 at 6:11
  • 3
    In Angular 8 I get the error: Error: "No value accessor for form control with name: 'right'"
    – jebbench
    Mar 6, 2020 at 11:29
  • I was able to get this to work in 8 and 9 . The key was to make sure I had the parent [formGroup] labeled. <your-child-component [formGroup]="form"></your-child-component>
    – Winnemucca
    Sep 25, 2020 at 11:55
  • nice blog post. really helped me with breaking up my form into components. Thanks
    – GrahamJRoy
    Dec 23, 2020 at 13:47
  • 2
    This still works, but I needed to do viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }]. Try searching for 'useExisting: FormGroupDirective' if this doesn't immediatley work. Jul 12, 2021 at 3:11
10

For Angular 11 I tried all the above answers, and in different combinations, but nothing quite worked for me. So I ended up with the following solution which worked for me just as I wanted.

TypeScript

@Component({
  selector: 'fancy-input',
  templateUrl: './fancy-input.component.html',
  styleUrls: ['./fancy-input.component.scss']
})
export class FancyInputComponent implements OnInit {

  valueFormGroup?: FormGroup;
  valueFormControl?: FormControl;

  constructor(
    private formGroupDirective: FormGroupDirective, 
    private formControlNameDirective: FormControlName
  ) {}

  ngOnInit() {
    this.valueFormGroup = this.formGroupDirective.form;
    this.valueFormControl = this.formGroupDirective.getControl(this.formControlNameDirective);
  }

  get controlName() {
    return this.formControlNameDirective.name;
  }

  get enabled() {
    return this.valueFormControl?.enabled
  }

}

HTML

<div *ngIf="valueFormGroup && valueFormControl">
    <!-- Edit -->
    <div *ngIf="enabled; else notEnabled" [formGroup]="valueFormGroup">
        <input class="input" type="text" [formControlName]="controlName">        
    </div>
    <!-- View only -->
    <ng-template #notEnabled>
        <div>
            {{valueFormControl?.value}}
        </div>
    </ng-template>
</div>

Usage

Note that I had to add ngDefaultControl otherwise it would give no default value accessor error in console (if somebody knows how to get rid of it without error - will be much appreciated).

<form [formGroup]="yourFormGroup" (ngSubmit)="save()">
    <fancy-input formControlName="yourFormControlName" ngDefaultControl></fancy-input>
</form>
3
9

this is an example of child component used inside parent formGroup : child component ts:

import { Component, OnInit, Input } from '@angular/core';
import { FormGroup, ControlContainer, FormControl } from '@angular/forms';


@Component({
  selector: 'app-date-picker',
  template: `
  <mat-form-field [formGroup]="form" style="width:100%;">
  <input matInput [matDatepicker]="picker" [placeholder]="placeHolder" [formControl]="control" readonly>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<mat-icon (click)="clearDate()">replay</mat-icon>`,
  styleUrls: ['./date-picker.component.scss']
})

export class DatePickerComponent implements OnInit {
  public form: FormGroup;
  public control : FormControl;
  @Input() controlName : string;
  @Input() placeHolder : string;


  constructor(private controlContainer: ControlContainer) { 
  }

  clearDate(){
    this.control.reset();
  }

  ngOnInit() {
    this.form = <FormGroup>this.controlContainer.control;
    this.control = <FormControl>this.form.get(this.controlName);
    }

}

css date picker :

mat-icon{
position: absolute;
left: 83%;
top: 31%;
transform: scale(0.9);
cursor: pointer;
}

and used like this :

 <app-date-picker class="col-md-4" [formGroup]="feuilleForm" controlName="dateCreation" placeHolder="Date de création"></app-date-picker>
9

Parent Component :

    @Component({
      selector: 'app-arent',
      templateUrl: `<form [formGroup]="parentFormGroup" #formDir="ngForm">
                       <app-child [formGroup]="parentFormGroup"></app-child>
                    </form>         `
    })
    
    export class ParentComponent implements {
        
     parentFormGroup :formGroup
    
     ngOnChanges() {        
       console.log(this.parentFormGroup.value['name'])
     }
  }

Child Component :

    @Component({
      selector: 'app-Child',
      templateUrl: `<form [formGroup]="childFormGroup" #formDir="ngForm">
                        <input id="nameTxt" formControlName="name">
                    </form>         `
    })
    
    export class ChildComponent implements OnInit {
     @Input()  formGroup: FormGroup
    
     childFormGroup :FormGroup
    
    ngOnInit() {
      // Build your child from
      this.childFormGroup.addControl('name', new FormControl(''))
    
      /* Bind your child form control to parent form group
         changes in 'nameTxt' directly reflect to your parent 
         component formGroup
        */          
     this.formGroup.addControl("name", this.childFormGroup.controls.name);
   
     }
  }
2
  • May I ask if the, #formDir="ngForm", in both components is relevant for the working of the passing the parentform to the childform?
    – Mike
    Jun 29, 2021 at 7:26
  • 1
    No, Both component has its own #formDir="ngForm", Those are not related to each other. Jul 1, 2021 at 9:10
2

The ngOnInit was important - this did not work in the constructor. And I prefer looking for the FormControlDirective - its the first one found in the child component's ancestor hierarchy

constructor(private formGroupDirective: FormGroupDirective) {}

  ngOnInit() {
    this.formGroupDirective.control.addControl('password', this.newPasswordControl);
    this.formGroupDirective.control.addControl('confirmPassword', this.confirmPasswordControl);
    this.formGroup = this.formGroupDirective.control;
  }
2

I would do this in this way, i have passed child form data as group to parent so you can have separated form data in submit call.

Parent:

<form [formGroup]="registerStudentForm" (ngSubmit)="onSubmit()">
<app-basic-info [breakpoint]="breakpoint" [formGroup]="registerStudentForm"></app-basic-info>
<button mat-button>Submit</button>
</form>

Child:

<mat-card [formGroup]="basicInfo">
    <mat-card-title>Basic Information</mat-card-title>
    <mat-card-content>
      <mat-grid-list
        [gutterSize]="'20px'"
        [cols]="breakpoint"
        rowHeight="60px"
      >
        <mat-grid-tile>
          <mat-form-field appearance="legacy" class="full-width-field">
            <mat-label>Full name</mat-label>
            <input matInput formControlName="full_name" />
          </mat-form-field>
        </mat-grid-tile>
    </mat-grid-list>
</mat-card-content>
</mat-card>

Parent.ts:

export class RegisterComponent implements OnInit {
    constructor() { }

    registerForm = new FormGroup({});
  
    onSubmit() {
      console.warn(this.registerForm.value);
    }
  
  }

Child.ts

export class BasicInfoComponent implements OnInit {
  @Input() breakpoint;
  @Input() formGroup: FormGroup;
  basicInfo: FormGroup;
  constructor() { }

  ngOnInit(): void {
    this.basicInfo = new FormGroup({
      full_name: new FormControl('Riki maru'),
      dob: new FormControl(''),
    });
    this.formGroup.addControl('basicInfo', this.basicInfo);
  }
}

Here in your child form components @Input() formGroup: FormGroup; part would be reference of parent component

0

I would pass the form as an input to the child component;

@Component(
    {
      moduleId: module.id,
      selector: 'epimss-error-messages',
      template: `
   <span class="error" *ngIf="errorMessage !== null">{{errorMessage}}</span>`,
      styles: [],
      directives: [REACTIVE_FORM_DIRECTIVES, NgIf]

    })
export class ErrorMessagesComponent implements OnInit {
  @Input()
  ctrlName: string

  @Input('form') _form;

  ngOnInit() {
         this.errorMessage();
      }

  errorMessage() {
    // Find the control in the Host (Parent) form
    let ctrl = this._form.find(this.ctrlName);

    console.log('ctrl| ', ctrl)

//    for (let propertyName of ctrl.errors) {
//      // If control has a error
//      if (ctrl.errors.hasOwnProperty(propertyName) && ctrl.touched) {
//        // Return the appropriate error message from the Validation Service
//        return CustomValidators.getValidatorErrorMessage(propertyName);
//      }
//    }

    return null;
  }

And of course you'll need o pass the form from the parent component to the child, which you can do it in different ways , but the simplest is :

Somewhere in your parent ;

     <epimss-error-messages [form]='form'></epimss-error-messages>
1
  • 3
    I think the private _form: FormGroup) should be removed from the constructor parameter list. Jul 24, 2016 at 10:34
0

If you want to access the parent from the child component, you can access parent property of the FormControl instance, https://angular.io/api/forms/AbstractControl#parent

To get the parent error:

const parent = control.parent;
const errors = parent.errors;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.