Angular2 Async validator

Question

Sorry for my bad english.

I'm trying to use a custom async validation in my angular application like this

 asyncValidator(control:FormControl):Promise<any>{
    const promise = new Promise<any>(
      (resolve, reject) =>{
        setTimeout(() => {
          console.log("it works");
          resolve(null);
        },5000);
      }
    );
    return promise;
  }

I declared my reactive form like this:

this.customForm = this.formbuilder.group({
      'userData': this.formbuilder.group({
        'name': ['',this.asyncValidator],
        'email': [''],
      }),
      'pass': [''],
      'gender': ['male'],
      'hobbies': this.formbuilder.array([
        ['Reading']
      ])
    })

Even though, the asyncValidator always resolve(null), the name input still has ng-invalid class.

yurzui · Accepted Answer · 2017-11-04 05:38:20Z

1

You incorrectly placed your async validator.

It should be:

'name': ['', null, this.asyncValidator],
         (1)  (2)          (3)

where:

(1) - control value

(2) - sync validator

(3) - async validator

Stackblitz example

answered Nov 4, 2017 at 5:38

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular2 Async validator

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related