title: Angular Material Date Picker returns null value
body: <p>I have used Angular Material &amp; Reactive Forms. First I am taking the system date &amp; showing it. But when I click submit it gives null value. Below are both HTML &amp; TS Part.</p>
  
  <pre><code>&lt;form [formGroup]="atAdminName" (ngSubmit)="onFormSubmit()"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-6"&gt;
          &lt;label style="font-size: 18px"&gt;
            From : &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
          &lt;/label&gt;
          &lt;mat-form-field&gt;
              &lt;input matInput [matDatepicker]="picker1" formControlName="date1" [formControl]="date" style="font-size:18px"&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;
          &lt;br&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;div class="text-center"&gt;
        &lt;button type="submit" class="btn btn-primary"&gt;Show Report&lt;/button&gt;
        &amp;nbsp;&amp;nbsp;&amp;nbsp;
        &lt;button type="button" class="btn btn-default waves-effect"&gt;Reset&lt;/button&gt;
      &lt;/div&gt;
   &lt;/form&gt;
  </code></pre>
  
  <p>And below is TS</p>
  
  <pre><code>export class AdminNameComponent implements OnInit {
  
    atAdminName = new FormGroup({
      date1: new FormControl()
    });
  
    get date1() { return this.atAdminName.get('date1'); }
  
    date = new FormControl(new Date());
    serializedDate = new FormControl((new Date()).toISOString());
  
    constructor(private fb: FormBuilder, public usr?: UserService) {
      this.atAdminName = this.fb.group({
        date1: new FormControl('', Validators.required),
      })
    }
  
    onFormSubmit() {
      const userid = this.usr.getUserId();
      console.log(this.atAdminName.value);
    }
  
  }
  </code></pre>