title: Angular Material showing two error messages
body: <p>I'm using angular material and reactive form. I want when errors messages are showing, only one message show and if I solve one error show another.</p>
  
  <p>How it is now:</p>
  
  <p><a href="https://i.stack.imgur.com/SipRk.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/SipRk.jpg" alt="enter image description here"></a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;mat-form-field class="example-full-width"&gt;
    &lt;input matInput
           placeholder="Username"
           name="username"
           [formControlName]="'username'"&gt;
    &lt;mat-error *ngIf="form.controls['username'].errors &amp;&amp; form.controls['username'].touched"&gt;
      &lt;div *ngIf="form.controls['username'].errors.required"&gt;
        Username is &lt;strong&gt;required&lt;/strong&gt;
      &lt;/div&gt;
      &lt;div *ngIf="form.controls['username'].errors.minlength"&gt;
        Required length: {{form.controls['username'].errors.minlength['requiredLength']}}
        Actual length:{{form.controls['username'].errors.minlength['actualLength']}}
      &lt;/div&gt;
      &lt;div *ngIf="form.controls['username'].errors.pattern"&gt;
        Only a-zA-Z0-9
      &lt;/div&gt;
  
    &lt;/mat-error&gt;
  
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>Maybe I should use if else or something else? What do you think?</p>