title: ngModel on the same form field as formControlName
body: <p>I used to have a simple form without any validation where the HTML roughly looked like this:</p>
  
  <pre><code>&lt;mat-form-field&gt;
          &lt;input matInput
                 type="text"
                 placeholder="TaskName"
                 [(ngModel)]="todoListService.toDoData.taskName"
                 formControlName="taskName"
                 required
                 required&gt;
                 [(ngModel)]="todoListService.toDoData.taskName"
          &gt;
      &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>I then moved my form to reactive forms and received the warning that I can't have ngModel on the same field as formControlname. Struggling how I'm supposed to assign the data from the form to the input field of the service.</p>
  
  <p>Current section of HTMl:</p>
  
  <pre><code>&lt;form [formGroup]="todoForm"&gt;
      &lt;mat-form-field&gt;
          &lt;input matInput
                 placeholder="TaskName"
                 formControlName="taskName"
                 required
                 [(ngModel)]="todoListService.toDoData.taskName"
          &gt;
      &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>So I removed the ngModel line and added this to my TS:</p>
  
  <pre><code>saveToDo() {
          this.dialogRef.close();
          this.todoListService.toDoData.taskName = this.todoForm.get('taskName');
          this.todoListService.toDoData.dueDate = this.todoForm.get('dueDate');
          this.todoListService.toDoData.extraNote = this.todoForm.get('extraNote');
          this.todoListService.addToDo();
      }
  </code></pre>
  
  <p>The errors I'm getting from that are:</p>
  
  <pre><code>ERROR in src/app/new-to-do-dialog/new-to-do-dialog.component.ts(31,9): error TS2322: Type 'AbstractControl' is not assignable to type 'string'.
  src/app/new-to-do-dialog/new-to-do-dialog.component.ts(32,9): error TS2322: Type 'AbstractControl' is not assignable to type 'DateConstructor'.
    Property 'prototype' is missing in type 'AbstractControl'.
  src/app/new-to-do-dialog/new-to-do-dialog.component.ts(33,9): error TS2322: Type 'AbstractControl' is not assignable to type 'string'.
  </code></pre>
  
  <p>Apparently, I misunderstood something about accessing data from the form. </p>
  
  <p>I have been following this guide and this example:</p>
  
  <p><a href="https://angular.io/api/forms/FormControlName#use-with-ngmodel" rel="nofollow noreferrer">https://angular.io/api/forms/FormControlName#use-with-ngmodel</a>
  <a href="https://stackblitz.com/edit/example-angular-material-reactive-form" rel="nofollow noreferrer">https://stackblitz.com/edit/example-angular-material-reactive-form</a></p>
  
  <p>Thanks for any help!</p>