title: Angular 5, Angular Material: Datepicker validation not working
body: <p>I'm using the latest Angular and latest Angular Material. I've got a datepicker and I want to add some validation. Documents say that the <code>required</code> attribute should work out of the box, but it doesn't seem to handle errors in the same way that other form elements do.</p>
  
  <p>Here is my mark-up:</p>
  
  <pre><code>&lt;mat-form-field class="full-width"&gt;
      &lt;input matInput [matDatepicker]="dob" placeholder="Date of birth" [(ngModel)]="myService.request.dob" #dob="ngModel" required app-validateAdult&gt;
      &lt;mat-datepicker-toggle matSuffix [for]="dob"&gt;&lt;/mat-datepicker-toggle&gt;
      &lt;mat-datepicker #dob&gt;&lt;/mat-datepicker&gt;
      &lt;mat-error *ngIf="dob.errors &amp;&amp; dob.errors.required"&gt;Your date of birth is required&lt;/mat-error&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>This works on the happy-path, so when a date is picked, the date ends up in the expected property in <code>myService</code>.</p>
  
  <p>The validation does not work in the way that I would expect however; in this case, if I click into the field and then out of the field without entering a date, then the input <em>does</em> get red styling, but the usual <code>[controlName].errors</code> object does not get populated. This means that showing an error message in the usual way (the way that works with other inputs that are not date pickers on the same page) does not work:</p>
  
  <pre><code>&lt;mat-error *ngIf="dob.errors &amp;&amp; dob.errors.required"&gt;Your date of birth is required&lt;/mat-error&gt;
  </code></pre>
  
  <p>The <code>*ngIf</code> is never true because the datepicker never seems to update <code>dob.errors</code>, so the error message is never shown, even when the input is styled as invalid.</p>
  
  <p>Is this right? Have I missed something?</p>
  
  <p>I've also tried adding a custom directive to validate that the date selected with the datepicker indicates that the user is over 18:</p>
  
  <pre><code>export class AdultValidator implements Validator {
    constructor(
      @Attribute('app-validateAdult') public validateAdult: string
    ) { }
  
    validate(control: AbstractControl): { [key: string]: any } {
      const dob = control.value;
      const today = moment().startOf('day');
      const delta = today.diff(dob, 'years', false);
  
      if (delta &lt;= 18) {
        return {
          validateAdult: {
            'requiredAge': '18+',
            'currentAge': delta
          }
        };
      }
  
      return null;
    }
  }
  </code></pre>
  
  <p>In this case I'm trying to use a similar <code>matError</code> (except linked to <code>dob.errors.validateAdult</code> instead) to show the error when appropriate.</p>
  
  <p>The interesting thing with this is that if I pick a date less than 18 years ago, the whole input, label, etc, gets the default red error styling, so something is happening, but I still don't see my error message.</p>
  
  <p>Any suggestions would be much appreciated!</p>
  
  <p>Exact versions:</p>
  
  <pre><code>Angular CLI: 1.6.3
  Node: 6.11.0
  OS: win32 x64
  Angular: 5.1.3
  ... animations, common, compiler, compiler-cli, core, forms
  ... http, language-service, platform-browser
  ... platform-browser-dynamic, router
  
  @angular/cdk: 5.0.4
  @angular/cli: 1.6.3
  @angular/flex-layout: 2.0.0-beta.12
  @angular/material-moment-adapter: 5.0.4
  @angular/material: 5.0.4
  @angular-devkit/build-optimizer: 0.0.36
  @angular-devkit/core: 0.0.22
  @angular-devkit/schematics: 0.0.42
  @ngtools/json-schema: 1.1.0
  @ngtools/webpack: 1.9.3
  @schematics/angular: 0.1.11
  @schematics/schematics: 0.0.11
  typescript: 2.4.2
  webpack: 3.10.0
  </code></pre>