mat-error не появляется при ошибке

Я создал метод 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 на теги small, это работает.

Я читал, что мат-ошибка появляется только тогда, когда 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] );
    });

person user3004118    schedule 19.02.2018    source источник
comment
удалите * ngIf = tradeForm.get ('exchange') .invalid, компонент mat-error сделает это за вас. Если ваша ошибка mat находится внутри matFormField, который содержит вход, связанный с управлением обменом, он должен работать из коробки.   -  person Pierre Mallet    schedule 19.02.2018


Ответы (1)


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

person user3004118    schedule 19.02.2018