如何在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.

Answer 1

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/

Answer 2

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)]}]

Answer 3

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.