title: Two way binding with reactive forms without using ngModel
body: <p>I have many many input need to be validated. So I use reactive form to validate them.
  For example,</p>
  
  <pre><code>&lt;input formControlName="testName"&gt;
  </code></pre>
  
  <p>In the constructor I defined the nested form.</p>
  
  <pre><code>constructor(private fb: FormBuilder) {
     this.totalForm = this.fb.group({
         'subForm': this.fb.group({
             testName: [null, Validators.required]
         // ....
        })
     });
  }
  </code></pre>
  
  <p>When I submit the data to the server, I want to use the fresh data from the input field. But I found the form control's data was not updated. The reason is that the form can't be two way binding unless using <code>ngModel</code>.</p>
  
  <pre><code>  this.dataTobeSubmited = this.totalForm.controls['subForm'].controls['testName'].value;
  </code></pre>
  
  <p>I use Angular 5, of course I can add <code>ngModel</code>. However if in the future we upgrade to the high version, it will becomes a problem since </p>
  
  <blockquote>
    <p>Using Reactive Froms with ngModel is deprecated in angular 6 and is
    removed in angular 7</p>
  </blockquote>
  
  <p>My case is a nested reactive forms, is there a better way to do two way binding?</p>
  
  <p><strong>UPDATE For my binding</strong></p>
  
  <p>The binding for the nested form group sample.</p>
  
  <pre><code>&lt;form [formGroup]="profileForm"&gt;
   &lt;app-child [subForm]="profileForm.controls['subForm']"&gt;&lt;/app-child&gt;
         &lt;button (click)="whatIsTheFormValue()"&gt; What Is My Value?&lt;/button&gt;
   &lt;/form&gt;
  </code></pre>
  
  <p><a href="https://stackblitz.com/edit/angular-9dzabi" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-9dzabi</a></p>
  
  <p>Am I right?</p>