title: Angular2 nested template driven form
body: <p>This is just madness , looks like there is no way to have a form which one of it's inputs is in a child component .</p>
  
  <p>I have read all the blogs and tutorials and everything , no way to work this out .</p>
  
  <p>The problem is when a child component is going to have any kind of form directives ( ngModel , ngModelGroup or whatever ..) , it wont work.</p>
  
  <p><strong><em>This is only a problem in template driven forms</em></strong></p>
  
  <p>This is the <a href="https://plnkr.co/edit/m0u1On?p=preview" rel="noreferrer">plunker</a> :</p>
  
  <pre class="lang-ts prettyprint-override"><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'child-form-component',
    template: ` 
    &lt;fieldset ngModelGroup="address"&gt;
      &lt;div&gt;
        &lt;label&gt;Street:&lt;/label&gt;
        &lt;input type="text" name="street" ngModel&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;label&gt;Zip:&lt;/label&gt;
        &lt;input type="text" name="zip" ngModel&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;label&gt;City:&lt;/label&gt;
        &lt;input type="text" name="city" ngModel&gt;
      &lt;/div&gt;
    &lt;/fieldset&gt;`
  })
  
  export class childFormComponent{
  
  
  }
  
  @Component({
    selector: 'form-component',
    directives:[childFormComponent],
    template: `
      &lt;form #form="ngForm" (ngSubmit)="submit(form.value)"&gt;
        &lt;fieldset ngModelGroup="name"&gt;
          &lt;div&gt;
            &lt;label&gt;Firstname:&lt;/label&gt;
            &lt;input type="text" name="firstname" ngModel&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;label&gt;Lastname:&lt;/label&gt;
            &lt;input type="text" name="lastname" ngModel&gt;
          &lt;/div&gt;
        &lt;/fieldset&gt;
  
        &lt;child-form-component&gt;&lt;/child-form-component&gt;
  
        &lt;button type="submit"&gt;Submit&lt;/button&gt;
      &lt;/form&gt;
  
      &lt;pre&gt;
        {{form.value | json}}
      &lt;/pre&gt;
  
      &lt;h4&gt;Submitted&lt;/h4&gt;
      &lt;pre&gt;    
        {{value | json }}
      &lt;/pre&gt;
    `
  })
  export class FormComponent {
  
    value: any;
  
    submit(form) {
      this.value = form; 
    }
  }
  </code></pre>