title: Angular 2 - formControlName inside component
body: <p>I want to create a custom input component that I can use with the FormBuilder API. How do I add <code>formControlName</code> inside a component?</p>
  
  <p>Template:   </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;label class="custom-input__label"
            *ngIf="label"&gt;
          {{ label }}
  &lt;/label&gt;
  &lt;input class="custom-input__input" 
         placeholder="{{ placeholder }}"
         name="title" /&gt;
  &lt;span class="custom-input__message" 
        *ngIf="message"&gt;
          {{ message }}
  &lt;/span&gt;
  </code></pre>
  
  <p>Component:</p>
  
  <pre class="lang-ts prettyprint-override"><code>import {
      Component,
      Input,
      ViewEncapsulation
  } from '@angular/core';
  
  @Component({
      moduleId: module.id,
      selector: 'custom-input',
      host: {
          '[class.custom-input]': 'true'
      },
      templateUrl: 'input.component.html',
      styleUrls: ['input.component.css'],
      encapsulation: ViewEncapsulation.None,
  })
  export class InputComponent {
      @Input() label: string;
      @Input() message: string;
      @Input() placeholder: string;
  }
  </code></pre>
  
  <p>Usage:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;custom-input label="Title" 
             formControlName="title" // Pass this to input inside the component&gt;
  &lt;/custom-input&gt;
  </code></pre>