title: How can I pass the FormGroup of a parent component to its child component using the current Form API
body: <p>I would like to pass the parent component's <code>FormGroup</code> to its child for the purpose of displaying an error-message using the child.</p>
  <p>Given the following parent:</p>
  <p><strong>parent.component.ts</strong></p>
  
  <pre class="lang-typescript prettyprint-override"><code>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
      });
    }
  }
  </code></pre>
  <p>I would now like to pass the form:FormGroup variable above to the child component below:</p>
  <p><strong>error-message.component.ts</strong></p>
  <pre class="lang-typescript prettyprint-override"><code>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: `&lt;span class=&quot;error&quot; *ngIf=&quot;errorMessage !== null&quot;&gt;{{errorMessage}}&lt;/span&gt;`,
    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) &amp;&amp; ctrl.touched) {
  //        // Return the appropriate error message from the Validation Service
  //        return CustomValidators.getValidatorErrorMessage(propertyName);
  //      }
  //    }
  
      return null;
    }
  </code></pre>
  <p>The constructor formGroup represents the FormGroup of the parent - in its present form it does not work.</p>
  <p>I am trying to follow this obsolete example at <a href="http://iterity.io/2016/05/01/angular/angular-2-forms-and-advanced-custom-validation/" rel="noreferrer">http://iterity.io/2016/05/01/angular/angular-2-forms-and-advanced-custom-validation/</a></p>