异步验证器 angular 6

Question

我正在尝试检查用户名是否可用，以使用 rest api 输入用户名。我正在为验证器使用 angular 表单。从后端我得到 true 是用户名存在，如果不存在则为 false。我正在使用以下代码：

this.registerForm = this.formBuilder.group({
            userName: ['', [Validators.required, this.userNameValidator.bind(this)]],
        });

userNameValidator(control: AbstractControl) {
    setTimeout(() => {
        return this.adminService.checkUserName(control.value).subscribe((Response:any)=>{
            return Response._body ? true : {'invalidUserName': true};
        })
    }, 1000);}

它在表单控件的错误属性中显示为 null

Answer 1

您的代码有几处错误。

你实际上从未 return 来自 userNameValidator 方法的任何东西，你应该 return 一个可观察的（或承诺）。
您不应使用 setTimeOut，而应使用 RxJs 库中的 timer，因为此 return 是一个可观察对象。
在计时器结果上使用 switchMap return 从异步调用中观察到的结果
您应该 return 使用 map 而不是订阅的结果，控件验证将订阅 returned observable。
如果验证通过，您应该 return null

import { ValidationErrors } from '@angular/forms';
import { Observable, timer } from 'rxjs';
import { map, switchMap } from 'rxjs/operators';

userNameValidator(control: AbstractControl): Observable<ValidationErrors | null> {
    return timer(1000).pipe(switchMap(() => {
        return this.adminService.checkUserName(control.value).pipe(map((Response:any)=>{
            return Response._body ? null : {'invalidUserName': true};
        }));
    }));
}

异步验证器 angular 6

Aysnc validator angular 6

angular

angular-forms

angular6