使用订阅设置自定义验证错误答案

【问题标题】：Set custom validation error using subscribe使用订阅设置自定义验证错误
【发布时间】：2020-03-26 02:37:04
【问题描述】：

我想根据数据库中存在的数据设置验证错误。

带有自定义验证器功能的表单控件：

nUname: ['', [Validators.required,unique_uname]]

自定义验证器功能：

以下函数获取用户名并在服务中使用发布请求获取数据。如果用户名在数据库服务中，则返回状态为“S”的响应，否则状态为“F”的错误。

如果状态为“S”，则应将错误“uname_repeat”设置为表单控件。 uname_repeat 错误未在订阅中设置，但在订阅之外它按要求工作。

function unique_uname(){
  return (control: AbstractControl): {[key: string]:any} | null => {
    const uname = control.value;
    if(uname.length!=0){
      ser.get_user(uname).subscribe(
        (res) => {
          if (res['status']=='S') {
             return {'uname_repeat':true} <-- This is not working
          }
        },
        (err) => {
          if (err['error']['status']=='F') {
            return null;
          }
        }

        );
        return {'uname_repeat':true} <-- This working

      }
      return null;
    };
  }

需要什么修改才能得到预期的结果。

【问题讨论】：

你试过异步验证器吗？

标签： angular subscription form-control

【解决方案1】：

这里需要用到的是async validator。

有两种方法可以以反应形式使用async validators。

首先，您可以在组件中添加验证功能并将其包含在您的响应式表单中。

validateEmailNotTaken(control: AbstractControl) {
    return this.signupService.checkEmailNotTaken(control.value).pipe(
        map(res => {
            return res ? null : { emailTaken: true };
        })
    );
}

并以如下形式包含：

this.myForm = this.fb.group({
    name: ['', Validators.required],
    email: [
        '',
        [Validators.required, Validators.email],
        this.validateEmailNotTaken.bind(this)
    ]
});

或者其次，您可以创建一个单独的验证文件

export class ValidateEmailNotTaken {
    static createValidator(signupService: SignupService) {
        return (control: AbstractControl) => {
            return signupService.checkEmailNotTaken(control.value).pipe(
                map(res => {
                    return res ? null : { emailTaken: true };
                })
            );
        };
    }
}

并以如下形式包含：

this.myForm = this.fb.group({
    name: ['', Validators.required],
    email: [
        '',
        [Validators.required, Validators.email],
        ValidateEmailNotTaken.createValidator(this.signupService)
    ]
});

这里有一个 stackblitz demo 供参考。

【讨论】：