mat-error tidak muncul saat error

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] );
    });

person user3004118    schedule 19.02.2018    source sumber
comment
hapus *ngIf=tradeForm.get( 'exchange' ).invalid, komponen mat-error melakukannya untuk Anda. Jika kesalahan mat Anda ada di dalam matFormField yang berisi input yang terikat ke kontrol pertukaran, kesalahan tersebut akan berhasil.   -  person Pierre Mallet    schedule 19.02.2018


Jawaban (1)


Saya telah menemukan solusi yang berfungsi dengan menambahkan control.markAsTouched() di dalam fungsi validator saya.

person user3004118    schedule 19.02.2018