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

Question

编辑：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 调用来验证我的输入时，一切都按预期工作。但是，如果我 return 和 Observable.of(true)，整个表格将停留在 PENDING

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

Answer 1

用 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 };
                });
        });
    };
}

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

Async validator causes the form status to stay PENDING

angular

observable

angular-validation