title: Applying angular2 form directives to custom input form elements
body: <p>I want to create a custom <code>InputCustom</code> component and use it to create model-driven forms.</p>
  
  <p>My custom component just wraps an input field and uses <code>Bootstrap material design</code> for look'n'feel.</p>
  
  <pre><code>@Component({
   selector:'inputCustom',
   template:`
      &lt;div class="form-group label-floating is-empty"&gt;
          &lt;label class="control-label" for="input"&gt;Type here&lt;/label&gt;
          &lt;input class="form-control" id="input" type="text"&gt;
          &lt;p class="help-block"&gt;Some help text&lt;/p&gt;
          &lt;span class="material-input"&gt;&lt;/span&gt;
      &lt;/div&gt;
  `})
  class InputCustom{....}
  </code></pre>
  
  <p>In <em>Angular2</em> when you create a model-driven form</p>
  
  <pre><code>&lt;form [ngFormModel]="formRef"&gt;
      &lt;input type ="email" ngControl="email"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>all <code>Controls</code> present on form elements are registered into a <code>ControlGroup</code>. By using the <em>formRef</em> you can track field values inside controllers.</p>
  
  <pre><code>@Component({...})
  class FormController{
      formRef: ControlGroup;
      constructor(...){
          this.form.valueChanges.subscribe(data =&gt; console.log('changes',  data));
      }
  }
  </code></pre>
  
  <p>Now, I want people to use my component like this</p>
  
  <pre><code>&lt;form [ngFormModel]="formRef"&gt;
      &lt;inputCustom type ="email" ngControl="email"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Q1: Do I need write my own custom <code>ngControl</code> directive?</p>
  
  <p>Q2: How to propagate <code>ngControl</code> to the inner <code>&lt;input&gt;</code> element wrapped by <code>&lt;inputCustom&gt;</code>?</p>
  
  <p>Q3: How should I register my <code>Control</code> inside the surrounding forms <code>ControlGroup</code>?</p>