在Angular 2中异步验证表单字段(在HTTP请求之后)

我们的想法是让用户POST表单.并触发API返回的错误,如果用户已经注册,则将电子邮件字段设置为错误.

我使用FormBuilder的反应形式,我尝试在订阅错误捕获器中调用验证器:

构造函数:

this.email = fb.control('', [Validators.required, Validators.pattern(/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/), SignupComponent.alreadyExist()]);
this.username = fb.control('', [Validators.required, Validators.pattern(/^([A-ZÀ-ÿa-z0-9]{2,})+(?:[ _-][A-ZÀ-ÿa-z0-9]+)*$/)]);

this.userRegisterForm = fb.group({
    email: this.email,
    username: this.username
});

自定义alreadyExist()验证器:

static alreadyExist(alreadyExist: boolean = false): any {

    return (control: FormControl): { [s: string]: boolean } => {

        if(alreadyExist) {
            return { emailAlreadyExist: true }
        }
    }
}

}

onSubmit():

this.user.create(newUser)
    .subscribe(
        data => {
            this.router.navigate(['signin']);
        },
        error => {
            if(error.status === 401) {

                // CALL THE VALIDATOR HERE TO SET : FALSE
                SignupComponent.alreadyExist(true);
            }

            this.loading = false;
        });

似乎调用了验证器,但其中返回的匿名方法永远不会被调用...也许这不是一个好习惯,任何人都可以强调我？谢谢

好的我找到了一个好的解决方案

就我而言,对于电子邮件FormControl,我不需要自定义验证器(即使可以使用setValidators()).

我可以删除alreadyExist()并从验证器列表中删除它的声明.

然后,我使用FormControl上可用的setErrors()方法 :

onSubmit():

this.user.create(newUser)
    .subscribe(
        data => {
            this.router.navigate(['signin']);
        },
        error => {
            if(error.status === 401) {

                // CALL THE VALIDATOR HERE TO SET : FALSE
                this.userRegisterForm.controls['email'].setErrors({
                  "emailAlreadyExist": true
                });
            }

            this.loading = false;
        });

电子邮件FormControl有一个新的错误,所以,通过这种方式,我可以附加此错误的错误消息.