Cannot get updateOn 'blur' validation to work - validation

Question

I currently have a validation function to verify if the password and confirm password match. This seems to work just fine if I do not add updateOn blur, However when I add the blur it doesn't hit the match function which causes validation to not work. Not sure what I am doing wrong ?
Here is the function to check for matching passwords
```import { FormGroup } from '#angular/forms';
// custom validator to check that two fields match
export function MustMatch(controlName: string, matchingControlName: string) {
return (formGroup: FormGroup) => {
const control = formGroup.controls[controlName];
const matchingControl = formGroup.controls[matchingControlName];
if (matchingControl.errors && !matchingControl.errors.mustMatch) {
// return if another validator has already found an error on the matchingControl
return;
}
// set error on matchingControl if validation fails
if (control.value !== matchingControl.value) {
matchingControl.setErrors({ mustMatch: true });
} else {
matchingControl.setErrors(null);
}
};
}
```
Here is the HTML
``` <div class="card-block">
<p class="text-success" *ngIf="success">Your password has successfully been updated, you can now <a [routerLink]="['/login']">login</a> with your new password.</p>
<p class="text-danger" *ngIf="( resetPasswordForm.invalid && submitted)">Please complete all
required fields.</p>
<p class="text-danger" *ngIf="resetPasswordForm.controls['confirmPassword'].errors && resetPasswordForm.controls['confirmPassword'].errors.mustMatch">Passwords must match.</p>
<ng-container *ngIf="!success">
<p class="text-danger" *ngFor="let err of errorMessages">{{ err }}</p>
</ng-container>
<div class="form-group" [ngClass]="{'has-danger' :submitted && resetPasswordForm.controls.password.errors}">
<label class="form-control-label" for="password">New Password</label>
<input id="password" type="password" class="form-control" name="password" formControlName="password"
[ngClass]="{ 'is-invalid': submitted && resetPasswordForm.controls.password.errors}" required>
</div>
<div class="form-group" [ngClass]="{'has-danger' :submitted && resetPasswordForm.controls.confirmPassword.errors}">
<label class="form-control-label" for="confirmPassword">Confirm Password</label>
<input id="confirmPassword" type="password" class="form-control" name="confirmPassword" formControlName="confirmPassword"
[ngClass]="{ 'is-invalid': (submitted && resetPasswordForm.controls.confirmPassword.errors) ||
resetPasswordForm.controls['confirmPassword'].errors && resetPasswordForm.controls['confirmPassword'].error.mustMatch}" required>
</div>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-primary" >Reset Password</button>
<small class="text-muted"> <a [routerLink]="['/login']">Back to Login</a></small>
</div>
</form>
</section>```
Here is the component code
``` private createForm() {
this.resetPasswordForm = this.fb.group({
password: ['', Validators.required],
confirmPassword: ['', Validators.required]
}, {
validator: MustMatch('password', 'confirmPassword'), updateOn: 'blur' // verify that passwords match
});
}```
I would expect to see the error message "Passwords must match." after the user moves off the confirm password input box if they do not match. If they do match never seeing the error message

Answer 1

Seems that the code above does work, Not sure why I things were not working correctly but after many changes and reverting back it seems to now work