Angular 和異步自定義驗證

Question

如果用戶名已被占用，我需要檢查我的應用程序並檢查我的后端。 為了使這盡可能簡單，而不是在輸入控件上執行模糊 function 調用，我選擇使用異步自定義驗證器。

我的驗證器看起來像這樣。

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

我可以看到我的系統點擊了驗證器並進行了后端調用，但由於某種原因我無法讓它工作。 有沒有辦法告訴系統什么是有效響應，或者它總是必須是 null？

Answer 1

您一直在返回 object。

要使其正常工作，您需要在出現錯誤時返回 object 和密鑰，或者在一切正常時返回 null

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

請注意，我不知道結果是什么，因此應該將result.success更改為。