Saya membuat metode Validator Khusus yang memeriksa apakah nilai yang diketik ke dalam mat-autocomplete ada dalam Array.
Metode ini mengembalikan { isExchange: true }. Saya menggunakan this.tradeForm.get( 'exchange' ).hasError( 'isExchange' ) di dalam metode lain yang mengembalikan pesan kesalahan. Ini semua berfungsi dengan baik.
Bagian dari mat-autocomplete, di dalam tag mat-form-field, saya menambahkan kode berikut:
<mat-error *ngIf="tradeForm.get( 'exchange' ).invalid">{{getFormErrorMessage( 'exchange' )}}</mat-error>
Entah kenapa ini tidak muncul ketika ada kesalahan, namun ketika saya mengubah tag mat-error menjadi tag kecil, berhasil.
Saya telah membaca bahwa kesalahan mat hanya muncul ketika FormControl tidak valid, tetapi saya tidak tahu mengapa kesalahan saya tidak valid.
Adakah yang tahu apa yang saya lewatkan?
Mungkin beberapa nilai yang perlu saya ubah di kontrol agar tag mat-error muncul?
Berikut tampilan fungsi validatornya:
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;
}
}
Dan inilah cara penggunaannya:
this.tradeForm = new FormGroup({
exchange: new FormControl( this.newTrade.Exchange.Title, [this.isExchange] );
});