时间戳

首页 > 解决方案 > 异步验证器导致表单状态保持 PENDING

angular - 异步验证器导致表单状态保持 PENDING

问题描述

编辑： switchmap 似乎是罪魁祸首。删除它时，我的表单状态不再停留在待处理状态。谁能解释一下？

我正在使用以下工厂为我的表单创建异步验证器：

export function createAsyncValidator(checkFn: (value: string) => Observable<Boolean>, errorMessage: string) {
    return (control: AbstractControl): Observable<ValidationErrors> => {
        return Observable.timer(500).switchMap(() => {
            return checkFn(control.value)
                .map(result => {
                    return result ? null : { [errorMessage]: true };
                });
        });
    };
}

我将它添加到我的表单中，如下所示：

createAsyncValidator(this.asyncValidator, 'Error')

验证器的实现（示例）：

asyncValidator = (value: string): Observable<Boolean> => {
    if (value === 'test') {
        return Observable.of(true); // THIS CAUSES THE FORM TO BE PENDING
    }    
    return this.http.get('url/'  + value, true); // THIS WORKS
};

当我的异步验证器使用http 调用来验证我的输入时，一切都按预期工作。但是，如果我返回Observable.of(true)，整个表单将停留在 PENDING

经过一些研究，我发现我的 Observable 不完整，因此状态为 PENDING。我怎样才能返回一个完成的可观察对象？

标签： angularobservableangular-validation

解决方案

用flatMap替换 switchMap 可以解决我的问题：

export function createAsyncValidator(checkFn: (value: string) => Observable<Boolean>, errorMessage: string) {
    return (control: AbstractControl): Observable<ValidationErrors> => {
        return Observable.timer(500).flatMap(() => {
            return checkFn(control.value)
                .map(result => {
                    return result ? null : { [errorMessage]: true };
                });
        });
    };
}

推荐阅读