检查您的异步验证器是否正确,并确保它返回一个Observable对象。
例如,下面的代码演示了如何使用异步验证器来验证输入的值是否唯一:
import { AsyncValidatorFn, AbstractControl, ValidationErrors } from '@angular/forms';
import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
import { UserService } from 'app/services/user.service';
export function uniqueNameValidator(userService: UserService): AsyncValidatorFn {
return (control: AbstractControl): Observable => {
return userService.checkName(control.value).pipe(
map(res => {
// 如果名字可用,返回null表示验证成功
return res ? null : { nameExists: true };
}),
catchError(() => {
// 如果存在错误,返回一个任意的非空值,表示验证失败
return of({ nameExists: true });
})
);
};
}
在上面的代码中,我们定义了一个名为uniqueNameValidator的异步验证器函数,该函数接收一个UserService对象作为参数。 我们使用管道操作符map和catchError来处理异步验证器的返回值,并返回一个Observable对象。 在map操作符中,我们将异步验证器的结果转换为ValidationErrors对象或null。 如果用户的名字已存在,则我们返回{ nameExists : true }。 如果存在错误,则我们返回一个非空值。
如果您的异步验证器仍然卡住了,请检查您是否正确使用了Observable,以及是否在验证器中处理了所有可能的错误。