title: How can I use an Angular Material Datepicker with a reactive / model-driven form?
body: <p>I have a reactive (model-driven) angular form with multiple form groups (formGroupName) and controls.  The form-fields on this form are controlled and populated by a FormBuilder in the associate TypeScript file.</p>
  
  <p><strong>I have a text field on this form that I'm using to collect a date from the user.  I wanted to associate an Angular Material datepicker on this field but as soon as I add a "formControlName" attribute to this input field, I get the error:</strong></p>
  
  <p><em>Error: More than one custom value accessor matches form control with path: ' -> '</em></p>
  
  <p>I can't use ngModel (switch to a template driven form) as everything else on this form is model-driven and this control sits within a formGroupName block.  I did try putting an ngModel on here just to see what would happen and Angular complained that I can't mix an ngModel in here.  </p>
  
  <p><strong>How can I data-bind this field (set the initial value for this field on the TypeScript side) and then get any changes made by the user on the template/view when the form is submitted while using Angular Material's datepicker?  If Angular Material's date picker doesn't support Model-driven forms, I'm willing to use another date-picker that supports this feature.</strong></p>
  
  <p>My model looks like this (the field that's relevant to this discussion is step1.visitDate):</p>
  
  <pre><code>this.form = this.fb.group({
          step1: this.fb.group({
              representative: [null],
              visitDate: [new Date()],
              category: ["Retail Store Visit"],
              contactType: ["Store Visit"],
              goPakStore: [null],
              goPakLocation: [null],
              eventType: ["Outreach"],
              eventDescription: [null],
              servicePlaza: [null],
              inventoryLocation: [null]
          }),
          step2: this.fb.group({
              inventoryItemLocation: [null],
              quantityAvailable: [null],
              quantityDistributed: [null],
          })
      });
  </code></pre>
  
  <p>My HTML template looks like this (the relevant parts):</p>
  
  <pre><code>&lt;form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" novalidate&gt;
  &lt;md-card class="users-listing" formGroupName="step1"&gt;
      &lt;md-card-content&gt;
          &lt;div&gt;
              &lt;md-input-container style="width:98%;"&gt;
                  &lt;input mdInput placeholder="Visit Date" [mdDatepicker]="visitDatePicker" formControlName="visitDate" required trim maxlength="10"&gt;
                  &lt;button mdSuffix [mdDatepickerToggle]="visitDatePicker"&gt;&lt;/button&gt;
              &lt;/md-input-container&gt;
              &lt;md-datepicker #visitDatePicker&gt;&lt;/md-datepicker&gt;
          &lt;/div&gt;
      &lt;/md-card-content&gt;
  &lt;/md-card&gt;
  </code></pre>
  
  <p></p>