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

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

0 голосов
/ 22 октября 2018

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

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

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

Я добавляю его в свою форму какthis: 

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. Как я могу вернуть наблюдаемое, которое завершается?

1 Ответ

0 голосов
/ 23 октября 2018

Замена 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 };
                });
        });
    };
}
...