Я создал метод 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] );
});