Password and Confirm password validation in Angular

Hi,

I have the below code but the error will not show if the confirm password is not the same as the password.

in the code:

passwordMatchingValidator(fc: AbstractControl): ValidationErrors | null {
    return fc.get('password')?.value === fc.get('confirmPassword')?.value ? null :
      { notmatched: true }
};

in the html:

<div class="form-group col-12">
    <label for="password" class="form-label">Confirm Password</label>
    <input type="password" class="form-control" formControlName="confirmPassword">
     <span  *ngIf="!confirmPassword.valid && confirmPassword.touched" class="error-block">
        <span *ngIf="(confirmPassword.hasError('required') || userSubmitted)" class="error-block">
              Please confirm password
        </span>    
        <span *ngIf="(registerationForm.hasError('notmatched'))" class="error-block">
              Password not matched
        </span>
    </span>
</div>

please confirm password message will show if the field is empty but if it is not the same as the password field it will not show the message Password not matched.