title: Angular reactive form : hasError function returns true but error is not displayed
body: <p>I've a weird problem with angular reactive form specially with "hasError" function. I check if my input contains a mac address. The function hasError sends me true but the error is not displayed.</p>
  
  <p>I get my data from an API. The data has been sent by postman software not by my form so it's not a normal way. BUT the problem is here and I would like to understand it.</p>
  
  <p>Here my code :</p>
  
  <p>component.ts</p>
  
  <pre><code>             // form init
  const macAddressPattern =  "^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$";
  const ipPattern =  "^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$";
  
              this.deviceForm = fb.group({
                  'name': fb.control('', [Validators.required]),
                  'model': fb.control('', [Validators.required]),
                  'brand': fb.control('', [Validators.required]),
                  'mac_address': fb.control('', Validators.compose([Validators.required, Validators.pattern(macAddressPattern)])),
                  'ip': fb.control('', Validators.compose([Validators.required, Validators.pattern(ipPattern)])),
              });
  </code></pre>
  
  <p>component.html</p>
  
  <pre><code>&lt;mat-form-field class="form-input"&gt;
                                      &lt;input matInput formControlName="mac_address" required
                                      placeholder="mac address"&gt;
                                      &lt;mat-error *ngIf="deviceForm.controls['mac_address'].hasError('pattern')"&gt;
                                              bad mac address // not displayed
                                      &lt;/mat-error&gt;
                                      &lt;!--&lt;mat-error *ngIf="deviceForm.controls['mac_address'].hasError('required')"&gt;
                                          The field is required
                                      &lt;/mat-error&gt;--&gt;
  
  
                                  &lt;/mat-form-field&gt;
  
                                  &lt;pre&gt; has error : {{deviceForm.controls.mac_address.hasError('pattern')}} &lt;/pre&gt; // has error : true
  </code></pre>
  
  <p>Any idea ? Thank you !</p>