title: Angular material mat-error cannot show message
body: <p>I have 2 datetime picker, endDate cannot be less than startDate</p>
  
  <pre><code>endDateAfterOrEqualValidator(formGroup): any {
      var startDateTimestamp: number;
      var endDateTimestamp: number;
      startDateTimestamp = Date.parse(formGroup.controls['startDateForm'].value);
      endDateTimestamp = Date.parse(formGroup.controls['endDateForm'].value);
      return (endDateTimestamp &lt; startDateTimestamp) ? { endDateLessThanStartDate: true } : null;
    }
  </code></pre>
  
  <p>in html:</p>
  
  <pre><code>&lt;mat-form-field&gt;
      &lt;input matInput  name="endDate" id="endDate" formControlName="endDateForm" [(ngModel)]="endDate" [matDatepicker]="toDatePicker"
      placeholder="To Date"&gt;
      &lt;mat-datepicker-toggle matSuffix [for]="toDatePicker"&gt;&lt;/mat-datepicker-toggle&gt;
      &lt;mat-datepicker disabled="false" #toDatePicker&gt;&lt;/mat-datepicker&gt;
      &lt;mat-error *ngIf="trainingDetail.hasError('endDateLessThanStartDate')"&gt;Not valid&lt;mat-error&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>with "mat-error", the message does not display. I try to change by "small"</p>
  
  <pre><code>&lt;small *ngIf="trainingDetail.hasError('endDateLessThanStartDate')"&gt;Not valid&lt;/small&gt;
  </code></pre>
  
  <p>the message well. Please advice me how to using mat-error</p>