title: Angular Material 8 formControlName error - getting conflicting messages
body: <p>I am attempting to work with <code>Angular Material (8) Reactive Forms</code>. I am working on a Registration Form.  I am getting errors that seem to contradict each other.</p>
  
  <p>**</p>
  
  <h2>When I do it this way (file: register.component.html):</h2>
  
  <p>**</p>
  
  <pre><code>  &lt;!-- Form --&gt;
              &lt;form [formGroup]="registerForm" class="text-center" style="color: #757575;"&gt;
  
                  &lt;div class="form-col"&gt;
                      &lt;div class="col"&gt;
                          &lt;!-- First name --&gt;
                          &lt;div class="md-form"&gt;
                              &lt;input required type="text" id="materialRegisterFormFirstName" class="form-control" 
                              mdbInput   [(ngModel)]="user.firstname"/&gt;
                              &lt;label for="materialRegisterFormFirstName"&gt;First name&lt;/label&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
  [... snip ...]
  </code></pre>
  
  <p>**</p>
  
  <h2>I get this error:</h2>
  
  <p>**</p>
  
  <pre><code>ERROR Error: 
        ngModel cannot be used to register form controls with a parent formGroup directive.  Try using
        formGroup's partner directive "formControlName" instead.  
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/cTxsj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cTxsj.png" alt="enter image description here"></a></p>
  
  <p><strong>So, I follow the instructions. When I use this approach (adding in <code>formControlName="firstname</code>"),</strong></p>
  
  <p>
              </p>
  
  <pre><code>            &lt;div class="form-col"&gt;
                  &lt;div class="col"&gt;
                      &lt;!-- First name --&gt;
                      &lt;div class="md-form"&gt;
                          &lt;input required type="text" id="materialRegisterFormFirstName" class="form-control" 
                          mdbInput formControlName="firstname"  [(ngModel)]="user.firstname"/&gt;
                          &lt;label for="materialRegisterFormFirstName"&gt;First name&lt;/label&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>[... snip ...]</p>
  
  <p>**</p>
  
  <h2>I get the following error:</h2>
  
  <p>**</p>
  
  <pre><code>forms.js:2312 
      It looks like you're using ngModel on the same form field as formControlName. 
      Support for using the ngModel input property and ngModelChange event with 
      reactive form directives has been deprecated in Angular v6 and will be removed 
      in Angular v7.
  
      For more information on this, see our API docs here:
      https://angular.io/api/forms/FormControlName#use-with-ngmodel
  </code></pre>
  
  <p>When looking up the problem, I come across this in an old thread:</p>
  
  <h2><strong>REFERENCE: <a href="https://stackoverflow.com/questions/54692460/ngmodel-on-the-same-form-field-as-formcontrolname">ngModel on the same form field as formControlName</a></strong></h2>
  
  <pre><code>From Angular 7 and onward you can't use both formControlName and ngModel together. If you want to use template-driven forms you can go with ngModel and if you want to use reactive forms you can't go with ngModel. (Simple)
  </code></pre>
  
  <p>**</p>
  
  <h2>It sounds like it is saying to remove the <code>formControlName</code> reference. How can this problem be resolved?</h2>
  
  <p>**</p>
  
  <p>TIA</p>