Angular 5 AsyncValidator оставляет управление со статусом: PENDING

Мне не удалось успешно использовать функцию AsyncValidator в реактивной форме, и мне нужна помощь, чтобы понять причину.

функция валидатора:

export function checkVoiceNumberExists(): AsyncValidatorFn {
    return (c: AbstractControl): Observable<ValidationErrors | null> => {
        return (c.value === null) ? Observable.of(null) : ValidMobileNumbers.checkVoiceNumberExists(c.value)
            .map(results => {
                return Observable.of(results.length === 1 ? null
                    : { 'invalidMobileNotListed': 'This mobile number does not exist in the validation list' }
                );
            }
            );
    }
}

Мой компонент формы машинописного текста импортирует и использует функцию следующим образом:

import { checkVoiceNumberExists, checkVoiceNumberNotAllocated } from 'common/validators/company-mobile-numbers';

let fctrl_voice: FormControl = new FormControl(
    '',
    [SabreFormControlValidators.hasLeadingZero, SabreFormControlValidators.isTelephoneNumber],
    [checkVoiceNumberExists(), checkVoiceNumberNotAllocated(empID)]
);

Я вижу, что в следующих отладочных данных должна быть возвращена ошибка:

Object {invalidMobileNotListed: "This mobile number does not exist in the validatio…"}
invalidMobileNotListed:"This mobile number does not exist in the validation list"

Однако СОСТОЯНИЕ элемента управления формы остается в ОЖИДАНИИ, как показано здесь:

<input _ngcontent-c9 = "" class = "form-control ng-dirty ng-pending ng-touched" maxlength = "11" ng-reflect-maxlength = "11" ng-reflect-name = "emp_telno_company" id = "emp_telno_company">

Я бы ожидал увидеть ng-invalid, а не ng-pending

Из-за этой проблемы

• мой класс ошибки CSS не применяется к элементу управления
• форма СТАТУС отображается как ОЖИДАНИЕ

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

export function checkVoiceNumberExists(): AsyncValidatorFn {
    return (c: AbstractControl): Observable<ValidationErrors | null> => {
        return (c.value === null) ? Observable.of(null) : ValidMobileNumbers.checkVoiceNumberExists(c.value)
            .map(results => {
                return results.length === 1 ? null : { 'invalidMobileNotListed': 'This mobile number does not exist in the validation list' };
            });
    }
}

Что мне нужно сделать, чтобы правильно выявить ошибку валидации в этой ситуации?