title: Angular Add Control to form from child component
body: <p>In Angular 2, I have a child component that includes an input. I want to add this input (control) to the parent components form (NgForm). </p>
  
  <p>I am currently using Template Driven Forms for simplicity.  </p>
  
  <p>I saw this answer, but think it is likely outdated?: <a href="https://stackoverflow.com/questions/37384373/angular-2-add-control-to-parent-components-form">Angular 2 Add control to parent component&#39;s form</a></p>
  
  <p>Child Component Template:
  formInputName is an input binding so that I can reuse this component, and add the 'name' property dynamically. </p>
  
  <pre><code>&lt;input class="text-input" [name]="formInputName" [id]="formInputName" type="text" [(ngModel)]="searchValue"
              (change)="onChange(searchValue)"
              (blur)="onBlur()"
              (focus)="onFocus()"
              [required]="isRequired"&gt;
  </code></pre>
  
  <p>On the parent component I have an instance of the form: </p>
  
  <pre><code>    @ViewChild('testForm') testForm: NgForm;
  </code></pre>
  
  <p>How can I add the child components control to this instance of <a href="https://angular.io/api/forms/NgForm" rel="nofollow noreferrer">NgForm</a>? I'm not sure how to do it with <a href="https://angular.io/api/forms/NgForm#addControl" rel="nofollow noreferrer">addControl</a>. Not sure what I need to add in the template, or how to do it programmatically in the controller.</p>
  
  <p>Plunker: <a href="https://plnkr.co/edit/rDluyJduyHF7vclK9wRE?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/rDluyJduyHF7vclK9wRE?p=preview</a></p>