How to properly display a Validation Error using a custom Async Validator in Angular

Question

Live demo

As you can see from this demo when you type characters inside the Old Password input field, the div element with the error "Old password doesn't match" keeps getting rendered in the browser making it in a bad User Experience. This element:

<div *ngIf="oldpassword.errors.oldPasswordInvalid">Old password doesn't match.</div>

keeps getting render every time I type characters into the input field.

I used a setTimeout() function in order to simulate a call to a server.

Any help would be appreciate it!

Answer 1

We can put the updateOn:'blur' when we build our form, like this: The only problem with this approach is that the error is not rendered while the user types inside the input field.

  constructor(fb: FormBuilder){
  this.form = fb.group({
  oldpassword:['',
  {validators: [Validators.required],
  asyncValidators: [SignUpValidators.oldPasswordInvalid],updateOn:'blur'}],
  newpassword: ['', Validators.required],
  confirmpassword:['',Validators.required]
})
}