Angular 2 form spread across components
<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>