Ошибка мат не отображается при ошибке

Question

Я создал метод Custom Validator, который проверяет, существует ли значение, введенное в mat-autocomplete, в массиве.

Этот метод возвращает { isExchange: true }. Я использую this.tradeForm.get( 'exchange').hasError( 'isExchange') внутри другого метода, который возвращает сообщение об ошибке. Это все отлично работает.

В рамках функции mat-autocomplete, внутри тегов mat-form-field, я добавил следующий код:

<mat-error *ngIf="tradeForm.get( 'exchange' ).invalid">{{getFormErrorMessage( 'exchange' )}}</mat-error>

Почему-то это не проявляется при возникновении ошибки, однако, когда я заменяю теги mat-error на маленькие теги, это работает.

Я прочитал, что ошибка mat появляется только в том случае, если FormControl недействителен, но я не могу понять, почему моя нет.

Кто-нибудь понял, что я пропускаю?

Может быть, мне нужно изменить какое-то значение в элементе управления, чтобы отображались теги mat-error?

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

isExchange( control: FormControl ) {
    let exchanges = [{ID: 1, Title: 'BitTrex'}, {ID: 2, Title: 'Bitfinex'}, {ID: 3, Title: 'Binance'}, {ID: 4, Title: 'Kraken'}, {ID: 5, Title: 'Coinmarketcap'}];

    if( exchanges.find( exchange => exchange.Title === control.value ) === undefined ) {
        control.markAsTouched(); // This makes it work, not sure why
        return { isExchange: true };
    } else {
        return null;
    }
}

И вот как это используется:

    this.tradeForm = new FormGroup({
        exchange: new FormControl( this.newTrade.Exchange.Title, [this.isExchange] );
    });

Answer 1

Я нашел рабочее решение, добавив control.markAsTouched() внутри моей функции валидатора.