Question

编辑：开关图似乎是罪魁祸首。删除它后，我的表单状态不再停留在“待定”状态。有人可以解释吗？

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

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。 如何返回完成的可观察对象？

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

1 个答案: