Асинхронный валидатор заставляет статус формы оставаться в состоянии ожидания

РЕДАКТИРОВАТЬ: карта переключения кажется виновником. При его удалении статус моей формы больше не остается в состоянии ожидания. Кто-нибудь может объяснить это?

Я использую следующую фабрику для создания асинхронных валидаторов для моих форм:

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), вся форма останется в ОЖИДАНИИ

После некоторого исследования я понял, что моя наблюдаемая не является полной, и, следовательно, состояние ОЖИДАЕТ. Как я могу вернуть наблюдаемое, которое завершается?

1 ответ

Замена switchMap на flatMap решает мою проблему:

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 };
                });
        });
    };
}
Другие вопросы по тегам