title: Passing form status data between parent and child components
body: <p>Using Angular 2, I have a long, complex form that I have split into one parent and two child components for easier management. The process works great until I need to keep track of the form status for validation. While data about the bound model can easily be transmitted via an @Input, I cannot figure out how to transmit data about the form itself.</p>
  
  <p>Here's an example using pseudo-code:</p>
  
  <pre><code>@Component({
      template: `
          &lt;form #f="ngForm"&gt;
            &lt;basic-details [exampleModel]="exampleModel"&gt;&lt;/basic-details&gt;
            &lt;advanced-details [exampleModel]="exampleModel"&gt;&lt;/advanced-details&gt;
            &lt;p&gt;Form data: {{f.value | json}}&lt;/p&gt;
          &lt;/form&gt;
      `
  })
  export class ParentFormComponent {
      public exampleModel: ExampleModel = new ExampleModel();
  }
  
  @Component({
      selector: 'basic-details',
      template: `
          &lt;input type="text" name="details" [(ngModel)]="exampleModel.details"&gt;
      `
  })
  export class BasicDetailsComponent {
      @Input() exampleModel: ExampleModel;
  }
  
  @Component({
      selector: 'advanced-details',
      template: `
          &lt;input type="text" name="advanced" [(ngModel)]="exampleModel.advanced"&gt;
      `
  })
  export class AdvancedDetailsComponent {
      @Input() exampleModel: ExampleModel;
  }
  </code></pre>
  
  <p>At the bottom of the form I am displaying the form values using a JSON pipe. <code>f.value</code> should display data about the "details" and "advanced" inputs. How do I pass information between the parent and child components so that the parent can keep track of the form status? Ideally this would work with both template driven and reactive forms.</p>