title: Password Confirm Angular Material
body: <p>I'm working to authenticate a user with Angular Material. I'm currently trying to get the proper mat-error to display when the confirmation password doesn't match the first entered pw. </p>
  
  <p>Here is my html: </p>
  
  <pre><code> &lt;mat-form-field hintLabel="Minimum 8 Characters" class=""&gt;
                              &lt;mat-label&gt;Password&lt;/mat-label&gt;
                              &lt;input 
                              matInput 
                              #input 
                              type="password"
                              formControlName="password"&gt;
                              &lt;mat-hint align="end"&gt;{{input.value?.length || 0}}/8&lt;/mat-hint&gt;
                          &lt;/mat-form-field&gt;
  
                          &lt;mat-form-field&gt;
                              &lt;mat-label&gt;Confirm&lt;/mat-label&gt;
                              &lt;input 
                              matInput
                              required  
                              type="password"
                              #confirm
                              formControlName="confirmPassword"&gt;
                              &lt;mat-error *ngIf="form.get('confirmPassword').invalid || confirmPasswordMismatch"&gt;Password does not match&lt;/mat-error&gt;
                              &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>The error displays once the user has focused on password confirmation and unfocuses without entering anything. Once the user enters anything, the error goes away even though the confirmation doesn't match the password.</p>
  
  <p>Here is my TS file:</p>
  
  <pre><code>public get confirmPasswordMismatch() {
          return (this.form.get('password').dirty || this.form.get('confirmPassword').dirty) &amp;&amp; this.form.hasError('confirmedDoesNotMatch');
      }
  
  this.form = new FormGroup({
              userName: new FormControl(null, [Validators.required]),
              fullName: new FormControl(null, [Validators.required]),
              email: new FormControl(null, [Validators.required, Validators.pattern(this.EMAIL_REGEX)]),
              password: new FormControl(null),
              confirmPassword: new FormControl(null, ),
          }, (form: FormGroup) =&gt; passwordValidator.validate(form));
  </code></pre>
  
  <p>The desired effect is that the error shows when the user has entered text into pw input when confirm pw is empty and to show an error when both have text but confirm doesn't match pw. </p>