title: How trigger immediate mat-error on custom error validation in Angular
body: <p>How can I get my custom <code>mat-error</code> to trigger immediately? I know there is an example in the Angular docs, but couldn't get that to work. My validation is not for <code>empty</code> nor of a certain <code>type</code>, for example <code>email</code>. </p>
  
  <p>I would like my error to display when I do a search in my drop-down field and no records were found. A normal <code>&lt;div&gt;</code> below the item triggers immediately on <code>*ngIf</code>, but not the <code>mat-error</code>. I have also tried updating the mat-error with <code>.innerHTML</code>, but the field does not exist. I am sure it is because Angular has not yet created it.</p>
  
  <p><strong>Here is my HTML:</strong></p>
  
  <pre><code>&lt;mat-form-field&gt;
      &lt;input type="text" placeholder="Customer Search" id="CustomerId" name="CustomerId" aria-label="Number" matInput [formControl]="myCustomerSearchControl"
        [matAutocomplete]="auto" (keyup)="onCustomerSearch($event)"
        required [errorStateMatcher]="matcher"&gt;
      &lt;mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" (optionSelected)="setLoadId($event)"&gt;
        &lt;mat-option *ngFor="let customer of customerArray" [value]="customer.Display"&gt;
          {{ customer.Display }}
        &lt;/mat-option&gt;
      &lt;/mat-autocomplete&gt;
      &lt;mat-error id="customer-error" *ngIf="noCustomersFound.value"&gt;
        {{noCustomersFound.message}}
      &lt;/mat-error&gt;
  &lt;/mat-form-field&gt;
  &lt;div&gt;
      &lt;span class="errorMessage" *ngIf="noCustomersFound.value"&gt;
        {{noCustomersFound.message}}
      &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Here is my method in my .ts file and some stuff I have tried:</strong></p>
  
  <pre><code>onCustomerSearch(search) {
      let searchObject = new SearchObject();
      searchObject.Entity = 'Customer';
      searchObject.SearchString = search.key;
      searchObject.SearchClauses = [{Column: 'sCustomerName'}];
      searchObject.DisplayColumn = 'sCustomerName';
      this.loadDataService.searchByEntity(searchObject)
        .subscribe(data =&gt; {
          if (data.length &lt; 1) {
            this.noCustomersFound.value = true;
            this.noCustomersFound.message = 'No match found.'
            document.getElementById('customer-error').innerHTML = 'No match found.';
          } else {
            this.noCustomersFound.value = false;
            this.noCustomersFound.message = '';
          }
          this.customerArray = data;
        });
  }
  </code></pre>