How to implement Custom Async Validator in Angular2/4/5

Question

1. Is it even supported by Angular yet ? see this open issue

2. If it is, then what is wrong in the code below

export class someClass{

    myForm:ControlGroup;

    constructor(public http:Http, public formBuilder:FormBuilder)
       this.myForm = formBuilder.group({
            ImageId: ["", Validators.required, this.asynValidator]
    });

    asyncValidator(control: Control): {[key: string]: any} {

        return new Promise (resolve => {

          let headers = new Headers();
          headers.append('Content-Type', 'application/json');

          this.http.get('http://localhost/ImageIdValidate?id='+ control.value, {headers:headers})
                .map(res => res.json())
                .subscribe(data => {
                    console.log(data);
                    if(data != null) {
                        resolve({"duplicate": true})
                    }
                    else resolve(null);      
                })
            });
        });
      }
    }

It doesn't even make a server request.

Thierry Templier · Accepted Answer · 2016-02-20 10:04:34Z

28

You need to bind your method on the component instance itself as described below:

this.myForm = formBuilder.group({
            ImageId: ["",    
               Validators.required, 
               this.asynValidator.bind(this)]
    });

Otherwise you won't be able to use the http property to execute your request.

This article could also give you some hints about asynchronous form validation (see the section "asynchronous validation"):

http://restlet.com/blog/2016/02/17/implementing-angular2-forms-beyond-basics-part-2/

edited Feb 20, 2016 at 10:04

answered Feb 20, 2016 at 9:58

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

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

4 Comments

Thierry Templier Over a year ago

In fact, it's the way JavaScript works. When you reference a method you lose the object it's attached on. You can force this using the bind method...

Ankit Singh Over a year ago

When I start to think that I'm on my way to be a PRO someday, things like this make me laugh. But anyway, is this question related ?

Thierry Templier Over a year ago

In fact OOP in JavaScript is different front the ones of languages like Java and C++. With the class keyword, you don't really define "true" classes like with languages. JavaScript usés prototype-based OOP. Yes the question you quoted is related to this problem.

msanford Over a year ago

And @ThierryTemplier's other answer showing an alternative to .bind() using a closure.

AVJT82 · Accepted Answer · 2017-12-01 09:56:47Z

3

as of newer versions of Angular, but pre version 5.0.0 you would add the async validator as the third argument for your formcontrol:

myControl: ['', [Validators.required], [this.asyncValidator.bind(this)]]

since version 5.0.0 you can now mark the validators like so:

myControl: ['', {validators: [Validators.required], 
                 asyncValidators:[this.asyncValidator.bind(this)]}]

edited Dec 1, 2017 at 9:56

answered Nov 5, 2017 at 8:44

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

1 Comment

Ian G Over a year ago

I just implemented an async validation function, and I also had to add NG_ASYNC_VALIDATORS provider to the component! (Which is an annoying bit of magic!!)

Richard Frimpong · Accepted Answer · 2017-08-16 11:30:04Z

0

Hello guys thanks for the solution. However it didnt work for me outta the box.

the problem was the async validator had to be a next parameter as part of the validators. so what worked for me was

this.myForm = formBuilder.group({
        ImageId: ["",    
           [Validators.required], 
           [this.asynValidator.bind(this)]]
});

and tadaa!! the headache was gone. hope it helps someone.

answered Aug 16, 2017 at 11:30

Richard Frimpong

212 bronze badges

2 Comments

MJK Over a year ago

The only difference i can see is you added some extra [] comparing to the answer post. And you have not mentioned why is the extra [] require. This is not a helpful anser

Derrick Miller Over a year ago

The extra [] brackets are required because async validators now have to be listed as the third parameter. Sync validators are listed in the second parameter, async validators in the third.

Collectives™ on Stack Overflow

How to implement Custom Async Validator in Angular2/4/5

3 Answers 3

4 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related