title: Angular material 2 datepicker with [ngmodel]
body: <p>I am trying to bind my date property to mat-datepicker's input as part of a reactive form group. All of my methods didn't work, as my submit button is set to disabled unless the form is valid:</p>
  
  <pre><code>&lt;mat-form-field fxFlex&gt;
    &lt;input matInput [matDatepicker]="datepicker1" placeholder="Start Date" formControlName="startingDate" required&gt;
    &lt;mat-datepicker-toggle matSuffix [for]="datepicker1"&gt;&lt;/mat-datepicker-toggle&gt;
    &lt;mat-datepicker touchUi="true" #datepicker1&gt;&lt;/mat-datepicker&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>Component.ts:</p>
  
  <pre><code>start: Date.now()
  startDate: "1/1/2018"
  this.ShiftForm = new FormGroup({
    startingDate: new FormControl(this.startDate),
    startTime: new FormControl(),
    endingDate: new FormControl(this.endDate),
    endTime: new FormControl(),
  });
  </code></pre>
  
  <p>Methods which didn't work:</p>
  
  <ol>
  <li>Adding <code>[(ngModel)]="startDate"</code> to input field</li>
  <li>Adding <code>[ngModel]="startDate"</code> to input field</li>
  <li>Preloading the formControl with the value: <code>startingDate: new FormControl(this.startDate),</code></li>
  </ol>
  
  <p>Methods which partially but not satisfyingly worked:</p>
  
  <ol>
  <li>Adding <code>[value]="startDate"</code> to input field: date showed but not read by the Reactive Form, meaning my submit button remains disabled as the form is not valid. To make it valid, I have to set the date manually (typing or using the datepicker)</li>
  <li>Adding <code>[ngModel]="startDate"</code> while removing <code>[matDatepicker]="datepicker1"</code> from the input field: date showed but removing the access to the datepicker.</li>
  </ol>
  
  <p>All I need is the [ngModel] to work as it should so the Reactive Form reads it.</p>
  
  <p>Help much much appreciated!</p>
  
  <p><strong>EDIT</strong>
  This is my formGroup:</p>
  
  <pre><code>this.ShiftForm = new FormGroup({
    startingDate: new FormControl(this.startDate),
    startTime: new FormControl(),
    endingDate: new FormControl(this.endDate),
    endTime: new FormControl(),
  });
  </code></pre>
  
  <p>This is the HTML:</p>
  
  <pre><code>&lt;form [formGroup]="ShiftForm" fxLayout="column" fxLayoutAlign="center stretch"&gt;
  &lt;mat-form-field fxFlex&gt;
    &lt;input matInput [matDatepicker]="datepicker1" placeholder="Start Date" [formControlName]="startingDate" required&gt;
    &lt;mat-datepicker-toggle matSuffix [for]="datepicker1"&gt;&lt;/mat-datepicker-toggle&gt;
    &lt;mat-datepicker touchUi="true" #datepicker1&gt;&lt;/mat-datepicker&gt;
  &lt;/mat-form-field&gt;
  ..
  ..
  ..
  &lt;/form&gt;
  </code></pre>
  
  <p>This is the Error I get now:</p>
  
  <blockquote>
    <p>Error: Cannot find control with unspecified name attribute</p>
  </blockquote>