title: Angular 2 form spread across components
body: <p>I am trying to create a forms component where the component provides the <code>&lt;form&gt;</code> and its descendants the form content, i.e. control. I am using RC4 with reactive forms. The component should be used like this:</p>
  
  <pre><code>&lt;my-formwizard [form]="form"&gt;
    &lt;input formControlName="name" type="text" /&gt;
  &lt;/my-formwizard&gt;
  </code></pre>
  
  <p>Here's a plunk showing the implementation: <a href="http://plnkr.co/edit/OSzjDQD63lwoEsyqdLvw?p=preview" rel="noreferrer">http://plnkr.co/edit/OSzjDQD63lwoEsyqdLvw?p=preview</a></p>
  
  <p>I run into an exception: TypeError: Cannot read property 'setParent' of null</p>
  
  <p>Is there a way to accomplish a reactive form spread across multiple components?</p>
  
  <hr />
  
  <p><strong>UPDATE</strong>: RC5 has a clearer error message and thanks to peeskillet's input, <code>formControlName</code> can be used if the custom directive gets the <code>FormGroup</code> attached through the <code>formGroup</code> property. The updated plunk shows the form spread across two components working:</p>
  
  <p><a href="http://plnkr.co/edit/1VfIH5AYjoe7dmizw6ss?p=preview" rel="noreferrer">http://plnkr.co/edit/1VfIH5AYjoe7dmizw6ss?p=preview</a></p>