title: Trying to show multiple <mat-error> messages with matAutocomplete and matInput in Reactive forms (Material 2)
body: <p>I want to display a couple of error messages using <code>mat-error</code>. I am using Angular Material 2 components with Reactive forms. I am also using <code>errorStateMatcher</code> to control as for when the error message appears. This works well for built-in validators like <code>required</code>. However, for matAutocomplete, I also want to when <code>No Matching Records are found</code> (basically when the user types something which is not there in the drop-down).</p>
  
  <blockquote>
    <p>The <code>html</code> part of the form looks like below</p>
  </blockquote>
  
  <pre><code>                   &lt;mat-form-field&gt;
                          &lt;input matInput
                                 [matAutocomplete]="insurerAuto"
                                 formControlName="insurer"
                                 [errorStateMatcher]="requiredErrorState"
                                 (keydown)="PanelOptions($event, insurerAuto)"
                                 placeholder="Insurer" required&gt;
                          &lt;mat-autocomplete #insurerAuto="matAutocomplete"
                                            [displayWith]="displayFn"&gt;
                              &lt;mat-option *ngFor="let insurer of filteredInsuranceVendors|async"
                                          [value]="insurer"&gt;
                                  {{ insurer.name }}
                              &lt;/mat-option&gt;
                          &lt;/mat-autocomplete&gt;
                          &lt;mat-error&gt;{{errorMsgs.requiredMsg}}&lt;/mat-error&gt;
                      &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>As you can see, I have a <code>mat-error</code> to display the 'required field` message. But I want something like this instead:</p>
  
  <pre><code>&lt;mat-form-field&gt;
                          &lt;input matInput
                                 [matAutocomplete]="insurerAuto"
                                 formControlName="insurer"
                                 [errorStateMatcher]="requiredErrorState"
                                 (keydown)="PanelOptions($event, insurerAuto)"
                                 placeholder="Insurer" required&gt;
                          &lt;mat-autocomplete #insurerAuto="matAutocomplete"
                                            [displayWith]="displayFn"&gt;
                              &lt;mat-option *ngFor="let insurer of filteredInsuranceVendors|async"
                                          [value]="insurer"&gt;
                                  {{ insurer.name }}
                              &lt;/mat-option&gt;
                          &lt;/mat-autocomplete&gt;
                          &lt;mat-error *ngIf="policyForm.get('policyType').get('subType').hasError('required')"&gt;{{errorMsgs.requiredMsg}}&lt;/mat-error&gt;
                          &lt;mat-error *ngIf="(filteredInsuranceVendors|async)?.length === 0"&gt;No Matching records found!&lt;/mat-error&gt;
                      &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>With two <code>mat-error</code> tags with <code>*ngIf</code> conditions controlling as when to show the appropriate error messages. The problem I am having is with <code>filteredInsuranceVendors</code> as it's an <code>Observable</code> and I am using <code>async</code>, I am not sure how can I use it to compare the length.</p>
  
  <blockquote>
    <p>The component code block:</p>
  </blockquote>
  
  <pre><code>    /** Error when invalid control is dirty, touched, or submitted. */
  export class RequiredErrorStateMatcher implements ErrorStateMatcher {
      isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
          const isSubmitted = form &amp;&amp; form.submitted;
          return !!(control &amp;&amp; control.invalid &amp;&amp; (control.dirty || control.touched || isSubmitted));
      }
  }
  
  export const errorMessages: { [key: string]: string } = {
      requiredMsg: 'This field is required'
  };
  
  export class SomeComponent implements OnInit {
      requiredErrorState = new RequiredErrorStateMatcher();
      errorMsgs = errorMessages;
      filteredInsuranceVendors:  Observable&lt;Array&lt;object&gt;&gt;;
  
      filterInsuranceVendor(): void {
          const insurerControl = this.policyForm.get('insurerInfo.insurer');
          this.filteredInsuranceVendors = this.commonFilter(insurerControl, this.insuranceVendors);
  
      }
  
          commonFilter(control: AbstractControl, lst: Array&lt;object&gt;): Observable&lt;any&gt; {
          return control.valueChanges
              .map(lstObj =&gt; this.displayFn(lstObj))
              .map(ObjName =&gt;
                  ObjName ? this.utilityService.filterForAutocomplete(ObjName, lst) : lst.slice())
      }
  
  }
  </code></pre>
  
  <p>I want to have my errorStateMatcher function to include both condtions like below. </p>
  
  <pre><code>        /** Error when invalid control is dirty, touched, or submitted. */
  export class RequiredErrorStateMatcher implements ErrorStateMatcher {
      isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
         if (this. filteredInsuranceVendors &amp;&amp; !this. filteredInsuranceVendors.length) {
              return true;
          }
          const isSubmitted = form &amp;&amp; form.submitted;
          return !!(control &amp;&amp; control.invalid &amp;&amp; (control.dirty || control.touched || isSubmitted));
      }
  }
  </code></pre>
  
  <p>One of the problem is, I am not sure how to deal with <code>filteredInsuranceVendors</code> as it's Observable. I tried converting it to <code>Array&lt;object&gt;</code>, still I was not able to use it with <code>errorStateMatcher</code>. </p>
  
  <p>Any input would be highly appreciated. Thanks!  </p>