How can I pass the FormGroup of a parent component to its child component using the current Form API

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/

101 thoughts on “How can I pass the FormGroup of a parent component to its child component using the current Form API”

  1. Thanks for a marvelous posting! I genuinely enjoyed reading
    it, you’re a great author. I will always bookmark your blog
    and will come back at some point. I want to encourage that you continue your great
    work, have a nice day!

    Reply
  2. Thank you for another informative site. The place else may I
    am getting that kind of info written in such a perfect manner?
    I have a mission that I’m simply now operating on,
    and I have been on the glance out for such info.

    Reply
  3. Oh my goodness! Incredible article dude! Thanks, However I am going through problems with your RSS.
    I don’t know the reason why I cannot join it. Is there anybody getting the same RSS problems?
    Anyone who knows the solution will you kindly respond? Thanks!!

    Reply
  4. I think this is one of the most vital information for me.
    And i am glad reading your article. But should remark on some general
    things, The site style is great, the articles is really
    excellent : D. Good job, cheers

    Reply
  5. Just desire to say your article is as astounding. The clarity in your post is just cool and i can assume you are an expert on this subject.
    Well with your permission allow me to grab your RSS feed to keep updated with forthcoming post.
    Thanks a million and please carry on the gratifying work.

    Reply
  6. What’s Happening i’m new to this, I stumbled upon this I’ve found It absolutely useful and it has helped me
    out loads. I am hoping to contribute & help other customers like its helped
    me. Good job.

    Reply

Leave a Comment