title: Both mat-error show when only one condition is true
body: <p>Both mat-error show when only one error appeared. </p>
  
  <p>I'm trying to make custom validators with mat-error. Both input for email and confirm password are red when each of them has a true value for hasError(''). </p>
  
  <p>I think my MyErrorStateMatcher class logic is wrong somehow. Please help! I have tried anything I could. Thank you in advance!</p>
  
  <p><a href="https://i.stack.imgur.com/03KbG.png" rel="nofollow noreferrer">Image</a></p>
  
  <p>As you can see in the image. When confirmPassword throws an error, the email field is also red.</p>
  
  <hr>
  
  <p>My ErrorStateMatcher:</p>
  
  <pre><code>export class MyErrorStateMatcher implements ErrorStateMatcher {
    isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
      const invalidCtrl = !!(control &amp;&amp; control.invalid &amp;&amp; (control.dirty || control.touched));
      const invalidParent = !!(control &amp;&amp; (control.parent.hasError('notTheSame') || control.parent.hasError('emailUsed')));
  
      return ((invalidCtrl || invalidParent));
    }
  }
  </code></pre>
  
  <p>HTML: (focus on email and confimPassword)</p>
  
  <pre><code>&lt;form [formGroup]="signupForm" (ngSubmit)="signup(signupForm)"&gt;
          &lt;mat-form-field style="width: 100%;"&gt;
            &lt;input matInput formControlName="email" placeholder="Email address" type="email" [errorStateMatcher]="matcher" required&gt;
            &lt;mat-error *ngIf="signupForm.controls.email.hasError('required')"&gt;Email required!&lt;/mat-error&gt;
            &lt;mat-error *ngIf="signupForm.controls.email.hasError('email')"&gt;Email invalid!&lt;/mat-error&gt;
            &lt;mat-error *ngIf="signupForm.hasError('emailUsed')"&gt;This email already exists!&lt;/mat-error&gt;
          &lt;/mat-form-field&gt;
          &lt;mat-form-field style="width: 100%;"&gt;
            &lt;input matInput formControlName="username" placeholder="User name" (blur)="signupForm.value.username != null ? isValidUsername(signupForm.value.username) : ''" required /&gt;
            &lt;mat-error&gt;Please enter your new username!&lt;/mat-error&gt;
            &lt;mat-error *ngIf="usernameInvalid"&gt;Username already exists!&lt;/mat-error&gt;
          &lt;/mat-form-field&gt;
          &lt;mat-form-field style="width: 100%;"&gt;
            &lt;input matInput formControlName="password" placeholder="New password" [type]="show ? 'text' : 'password'" required /&gt;
            &lt;mat-icon matSuffix (click)="show = !show" style="cursor: pointer;"&gt;{{show ? 'visibility' : 'visibility_off'}}&lt;/mat-icon&gt;
            &lt;mat-error&gt;Please enter your password!&lt;/mat-error&gt;
          &lt;/mat-form-field&gt;
          &lt;mat-form-field style="width: 100%;"&gt;
            &lt;input matInput formControlName="confirmPassword" placeholder="Confirm password" type="password" [errorStateMatcher]="matcher" required&gt;
            &lt;mat-error *ngIf="signupForm.controls.confirmPassword.hasError('required')"&gt;Please confirm your password!&lt;/mat-error&gt;
            &lt;mat-error *ngIf="signupForm.hasError('notTheSame') &amp;&amp; signupForm.value.confirmPassword != ''"&gt;Password is not the same!&lt;/mat-error&gt;
          &lt;/mat-form-field&gt;
          &lt;br&gt;
        &lt;button mat-raised-button class="sessionBtn" color="primary" [disabled]="signupForm.invalid"&gt;Submit!&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>TS:</p>
  
  <pre><code>signupForm = new FormGroup({
      firstName: new FormControl(),
      lastName: new FormControl(),
      email: new FormControl('', [
        Validators.required,
        Validators.email
      ]),
      username: new FormControl(),
      password: new FormControl('', [
        Validators.required
      ]),
      confirmPassword: new FormControl('', [
        Validators.required
      ])
    }, { validators: [this.checkPassword, this.checkExistingEmail] });
    matcher = new MyErrorStateMatcher();
  
  /////////Custom validator////////
  
    checkPassword(signupForm: FormGroup) {
      let password = signupForm.value.password;
      let confirmPassword = signupForm.value.confirmPassword;
  
      return password === confirmPassword ? null : { notTheSame: true };
    }
  
    checkExistingEmail(signupForm: FormGroup) {
      let inputEmail = signupForm.value.email;
      let dbEmail = "test@test.com";
  
      return inputEmail !== dbEmail ? null: { emailUsed: true };
    }
  </code></pre>
  
  <p>Error happend with input email and input confirmPassword, both have <code>[errorStateMatcher]="matcher"</code></p>