title: mat-form-field w/ matMatepicker Error: More than one custom value accessor matches form control
body: <p>I'm attempting to bind the value from a mat-datepicker to a form control. When I try to do something like 
  <em><a href="https://stackblitz.com/angular/dlerqrdamjl?file=app%2Fdatepicker-value-example.html" rel="nofollow noreferrer">this example</a> I am seeing this error being thrown:</em> </p>
  
  <pre><code>"Uncaught (in promise): Error: More than one custom value accessor matches form control with unspecified name attribute
  Error: More than one custom value accessor matches form control with unspecified name attribute"
  </code></pre>
  
  <p>I've tried using formControlName too, but it throws the same error. What am I doing wrong here? </p>
  
  <p>Code:</p>
  
  <p>xhtml</p>
  
  <pre><code>&lt;mat-form-field&gt;
    &lt;input matInput [matDatepicker]="picker1" placeholder="Angular forms" [formControl]="date"&gt;
    &lt;mat-datepicker-toggle matSuffix [for]="picker1"&gt;&lt;/mat-datepicker-toggle&gt;
    &lt;mat-datepicker #picker1&gt;&lt;/mat-datepicker&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>typescript</p>
  
  <pre><code>  date = new FormControl(new Date());
  </code></pre>
  
  <p>...and with formControlName</p>
  
  <p>xhtml</p>
  
  <pre><code>&lt;form-container title="Fake Title"&gt;
    &lt;form [formGroup]="form" novalidate="" class="form" (ngSubmit)="onSubmitForm()"&gt;
      &lt;mat-form-field&gt;
        &lt;input matInput [matDatepicker]="picker1" placeholder="Angular forms" formControlName="date"&gt;
        &lt;mat-datepicker-toggle matSuffix [for]="picker1"&gt;&lt;/mat-datepicker-toggle&gt;
        &lt;mat-datepicker #picker1&gt;&lt;/mat-datepicker&gt;
      &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>typescript</p>
  
  <pre><code>  buildForm(): FormGroup {
  
      return this.formBuilder.group({
        date: [new Date()]
      });
  </code></pre>