Question

1。 Angular甚至支持吗？见this未解决的问题

2。如果是，那么下面的代码有什么问题

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

它甚至没有发出服务器请求。

Answer 1

您需要在组件实例本身上绑定您的方法，如下所述：

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

否则您无法使用http属性执行请求。

本文还可以为您提供有关异步表单验证的一些提示（请参阅＆＃34;异步验证＆＃34;）部分：

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

Answer 2

从Angular的较新版本开始，但在版本5.0.0之前，您会将async验证器添加为formcontrol的第三个参数：

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

自版本5.0.0以来，您现在可以像这样标记验证器：

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

Answer 3

大家好，谢谢你的解决方案。然而，它对我来说不起作用。

问题是异步验证器必须是验证器的一部分的下一个参数。那对我有用的是

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

和tadaa !!头痛不见了。希望它可以帮助某人。

如何在Angular2 / 4/5中实现自定义异步验证器

3 个答案: