I have created an asynchronous validator for passwords.
export class PasswordsValidators{
static oldPasswordMatch(control: AbstractControl) : Promise<ValidationErrors> | null {
return new Promise((resolve) => {
if(control.value !== "1234")
resolve({oldPasswordInvalid:true})
else
resolve(null);
});
}
}
However, I am unable to access the oldPasswordInvalid variable as it is enclosed within an object named __zone_symbol__value.
https://i.sstatic.net/aHyuc.png
This is the formGroup setup:
form = new FormGroup({
oldPassword: new FormControl("",[
Validators.required,
PasswordsValidators.oldPasswordMatch
]),
newPassword: new FormControl("",[
Validators.required
]),
confirmPassword: new FormControl("",[
Validators.required
])
})
This is how the front-end is structured:
<div class="form-group">
<label>Old Password</label>
<input
formControlName="oldPassword"
type="password"
class="form-control"
placeholder="Password">
<div class="alert alert-danger" *ngIf="oldPassword.invalid && oldPassword.touched">
<p *ngIf="oldPassword.errors.required"> Should be filled </p>
<p *ngIf="oldPassword.errors.oldPasswordInvalid">Didn't match</p>
</div>
</div>
I would appreciate any insights on what could be missing in my implementation.