title: Angular2/4 material-design, <mat-error> not working - when no results found
body: <p>I am using Angular4 Material Design with WebAPI - I am trying to get  to display a validation message - "No matches found" 
  when a user enter an invalid value in the  (Material Auto Complete).</p>
  
  <p>I have tried few things based on google searches:-
  <a href="https://material.angular.io/components/input/overview#custom-error-matcher" rel="nofollow noreferrer">https://material.angular.io/components/input/overview#custom-error-matcher</a>
  <a href="https://github.com/angular/material2/blob/4383f51a58de1fccad2ed64443a5e22ab435c02b/src/demo-app/input/input-demo.ts#L56" rel="nofollow noreferrer">https://github.com/angular/material2/blob/4383f51a58de1fccad2ed64443a5e22ab435c02b/src/demo-app/input/input-demo.ts#L56</a></p>
  
  <p>and below is my current implementation:- </p>
  
  <p>HTML</p>
  
  <pre><code>     &lt;div class="form-group spaces" style="width: 30%"&gt;
       &lt;mat-form-field&gt;
       &lt;input  [errorStateMatcher]="myErrorStateMatcher.bind(this)" matInput 
       placeholder="NUMBER" [matAutocomplete]="auto" type="text" 
       formControlName="validNumber" required [formControl]="stateCtrl"&gt;
       &lt;md-error *ngIf="validNumbers?.length === 0"&gt; No Matching Records 
       Found!
       &lt;/md-error&gt;
      &lt;/mat-form-field&gt;
  
      &lt;mat-autocomplete #auto="matAutocomplete" mat-no-cache="true"&gt;
      &lt;mat-option *ngFor="let c of validNumbers " [value]="c"&gt;{{c}}&lt;/mat-
      option&gt;
      &lt;/mat-autocomplete&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Typescript:- </p>
  
  <pre><code> import { ErrorStateMatcher } from '@angular/material/core';
   public validNumbers;
  
   myErrorStateMatcher(control, form): boolean
   {
      if (this.validNumbers &amp;&amp; !this.validNumbers.length)
      {
          return true;
      }
  
      // Error when invalid control is touched, or submitted
      const isSubmitted = form &amp;&amp; form.submitted;
      return !!(control.invalid &amp;&amp; (control.touched || isSubmitted));
    }
  </code></pre>
  
  <p>Error message attached:-
  <a href="https://i.stack.imgur.com/dqzcw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dqzcw.png" alt="Error Message"></a></p>