title: Angular 5 binding material 5 DatePicker to form field
body: <p>I am trying to bind an Angular materials 5 date picker to a form field, i am following the official tutorial <a href="https://material.angular.io/components/datepicker/overview" rel="nofollow noreferrer">here</a> but there isn't any information about how to bind the calendar value to a field within a form, it could also be bound to a class attribute, but that also does not work.
  My template is simply:</p>
  <pre><code> &lt;form #theForm=&quot;ngForm&quot;&gt;
     .......Some fields.......
     &lt;mat-form-field&gt;
                    &lt;input matInput [matDatepicker]=&quot;fixDate&quot; placeholder=&quot;Choose a date&quot; name=&quot;fixDate&quot;&gt;
                    &lt;mat-datepicker-toggle matSuffix [for]=&quot;fixDate&quot;&gt;&lt;/mat-datepicker-toggle&gt;
                    &lt;mat-datepicker #fixDate&gt;&lt;/mat-datepicker&gt;
                &lt;/mat-form-field&gt;
   &lt;/form&gt;
  </code></pre>
  <p>So this piece of template within the <code>&lt;mat-form-field&gt;</code> tags, consists of an input within a form, by giving it a <code>name</code>, i would expect it to be 'catchable' from the <code>.ts</code>, but it does not work, what i do in the <code>.ts</code> file is:<br>
  <code>(click)=&quot;saveReport(theForm)&quot;</code></p>
  <pre><code>`public saveReport(form: NgForm){
      if(confirm(&quot;Sure you wanna save?&quot;)){
        //Some non relevant validation
        let valuesFromForm = form.value;
        console.log(valuesFromForm['fixDate']);
      }
  }`
  </code></pre>
  <p>This prints <code>undefined</code>, but other fields in the form work just fine, when you give them a <code>name</code> they are retrievable via the form object in the <code>.ts</code> file
  Any advise?</p>