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

Question

想法是让用户 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 }
        }
    }
}

提交():

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

似乎调用了验证器，但从未调用过其中返回的匿名方法...也许这不是一个好习惯，有人可以强调我吗？谢谢

Answer 1

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

在我的例子中，对于电子邮件 FormControl，我不需要自定义的 validator(即使可以使用 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 有一个新的错误，因此，通过这种方式我可以为这个错误附加一条错误消息。