title: How to correctly 2-way-bind with reactive forms?
body: <p>So far I've always seen that you shouldn't mix using <code>[(ngModel)]</code> with reactive forms, and instead simply use <code>formControlName</code>.</p>
  
  <p>However, for me it doesn't seem to be working?</p>
  
  <p>I have a form and I add controls to it</p>
  
  <pre><code>this.exportForm.addControl("surcharge", new FormControl(this.details.SurchargeExtraField));
  </code></pre>
  
  <p>and in my html I give the input the <code>formControlName</code></p>
  
  <pre><code>    &lt;div class="col-sm-12 col-md-6"&gt;
          &lt;input type="text" formControlName="surcharge" /&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>However when I use the input it doesn't change anything about <code>this.details.SurchargeExtraField</code>, it only works for validation.</p>
  
  <p>When I do:</p>
  
  <pre><code>&lt;input type="text" formControlName="surcharge" [(ngModel)]="details.SurchargeExtraField" /&gt;
  </code></pre>
  
  <p>It works perfectly, but appareantly it's not the correct way.</p>