Angular 和异步自定义验证

Question

如果用户名已被占用，我需要签入我的应用并与我的后端核实。为了使这尽可能简单，而不是在输入控件上执行模糊函数调用，我选择使用异步自定义验证器。

我的验证器看起来像这样。

export function userNameValidator(userservice: UserService): AsyncValidatorFn  {
    return (control: AbstractControl) => {
        return userservice.validateUsername(control.value.toLowerCase())
            .pipe(
                tap(result => console.log(result)),
                // tslint:disable-next-line: semicolon
                // tslint:disable-next-line: arrow-return-shorthand
                map(result => {  return result; })
            );};}

返回的结果如下所示{username_avail: true}

这是我注册自定义异步验证器的方式

  form = this.fb.group({
    username: ['', {
        validators: [
            Validators.required,
            Validators.minLength(5),
            Validators.maxLength(20)
        ],
        asyncValidators: [userNameValidator(this.userservice)],
        updateOn: 'blur'
    }]});

我可以看到我的系统点击了验证器并进行了后端调用，但由于某种原因我无法让它工作。有没有办法告诉系统什么是有效响应或者它总是必须为空？

Answer 1

你一直在返回对象。

要使其正常工作，您需要在出错时返回带有键的对象，或者在一切正常时返回 null

 map(result => {  return result.success ? {invalidUsername: {value: control.value}} : null; })

注意我不知道结果是什么，所以result.success应该改成。