Using Async custom Validator in Angular 9

Question

Stackblitz link to see code

I want to use a custom Async validator in my code to check if certain pin-codes exist in my database or not and then take some action in the HTML reactive form
My HTML element instantly calls the method before the validator is done validating so the angular make the "pending" status true as the validation is pending

What I want??

I want the html to call my method after all the validators are done evaluating -->do not suggest to use set timeout

if you can help me with the proper way of doing this it will be great.

Currently I am using settimeout function inside my method and it is working fine but it is not the correct way.

mbojko · Accepted Answer · 2022-12-29 14:55:54Z

Remove this line from the template

(input)="userForm.get('pinCode').value != '' ? checkForPincode() : null"

this is responsible for checking calling checkForPincode() as soon as the user presses a key.

Forms, and fields, have various event streams attached to them, I think statusChanges will be the best. You can, after the form is created, do

this.userForm.get('pinCode').statusChanges
    .subscribe(() => this.checkForPincode());

statusChanges can be things like VALID, INVALID, PENDING.

To save yourself unnecessary checks, you can pass it through distictUntilChanged operator

this.userForm.get('pinCode').statusChanges
    .pipe(
        distictUntilChanged(),
    ).subscribe(() => this.checkForPincode());

or even do the check for field validity right there:

this.userForm.get('pinCode').statusChanges
    .pipe(
        distictUntilChanged(),
        filter(value => value === 'VALID'),
    ).subscribe(() => this.userForm.get('Province').enable());

Collectives™ on Stack Overflow

Using Async custom Validator in Angular 9

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related