title: Angular 2 child component can't get parent component
body: <p>I'm trying to <a href="https://coryrylan.com/blog/angular-2-form-builder-and-validation-management" rel="nofollow">make a component</a> which will show specific error messages given control input names.
  Here are my codes...</p>
  
  <p>register.ts:</p>
  
  <pre class="lang-js prettyprint-override"><code>import { Component } from 'angular2/core';
  import { FormBuilder, Validators } from 'angular2/common';
  import {ControlMessages} from './control-msg';
  @Component({
      selector: 'registration-form',
      templateUrl: './app/components/registration/registration.html',
      directives: [ControlMessages]
  })
  </code></pre>
  
  <p>control-msg.ts:</p>
  
  <pre class="lang-js prettyprint-override"><code>import {Component, Host} from 'angular2/core';
  import {NgFormModel,FORM_PROVIDERS} from 'angular2/common';
  @Component({
      selector: 'control-messages',
      inputs: ['controlName: control'],
      template: `&lt;div *ngIf="errorMessage !== null"&gt;{{errorMessage}}&lt;/div&gt;`
  })
  export class ControlMessages {
      controlName: string;
      constructor( @Host() private _formDir: NgFormModel){/* _formDir doesn't get the parent object! */}
  
      get errorMessage() {
          // Find the control in the Host (Parent) form
          let c = this._formDir.form.find(this.controlName);
          return null;
      }
  }
  </code></pre>
  
  <p>The problem is as you can see the <code>ControlMessages</code> can't get the value of my parent <code>NgFormModel</code>.  </p>
  
  <p>Angular 2 shows me this error,</p>
  
  <blockquote>
    <p>EXCEPTION: No provider for NgFormModel! (ControlMessages -> NgFormModel)  </p>
  </blockquote>
  
  <p>If I include the <code>NgFormModel</code> as a provider in the ControlMessages it then shows me this error,  </p>
  
  <blockquote>
    <p>EXCEPTION: TypeError: Cannot read property 'find' of null in [errorMessage !== null in ControlMessages@0:5]  </p>
  </blockquote>
  
  <p>Note that I have not injected any providers while bootstrapping the app.<br>
  I'm using <em>angular2 beta 12</em>.</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>form template:  </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="form-group" 
       [class.has-error]="!registerForm.find('username').valid &amp;&amp; registerForm.find('username').dirty"&gt;
    &lt;label for="username"&gt;Username&lt;/label&gt;
    &lt;input type=text id="username" class="form-control" placeholder="username" 
           [ngFormControl]="registerForm.find('username')"&gt;
    &lt;control-messages control="username"&gt;&lt;/control-messages&gt;
  &lt;/div&gt;
  </code></pre>