Question

我正在尝试使用rest api输入用户名时检查用户名是否可用。我正在使用角度形式的验证器。从后端我得到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);}

它在表单控件的errors属性中显示为空

Answer 1

您的代码有几处错误。

您从未真正从userNameValidator方法返回任何东西，应该返回一个可观察的（或承诺）。
您不应使用setTimeOut，而应使用RxJs库中的timer，因为这将返回可观察到的结果。
在计时器结果上使用switchMap从异步调用中返回可观察到的结果
您应使用map返回结果，而不要订阅，控件验证将订阅返回的observable。
如果验证通过，则应返回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};
        }));
    }));
}

Aysnc验证器角度6

1 个答案: