mat-error 不会出现错误

Question

我创建了一个自定义验证器方法，用于检查输入到 mat-autocomplete 中的值是否存在于数组中。

此方法 returns { isExchange: true }。我在另一个方法中使用 this.tradeForm.get( 'exchange' ).hasError( 'isExchange' ) returns 一条错误消息。这一切都很好。

mat-autocomplete 的一部分，在 mat-form-field 标签内，我添加了以下代码：

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

当我将 mat-error 标签更改为 small标签，有效。

我了解到只有当 FormControl 无效时才会出现 mat-error，但我不知道为什么我的不是。

有人知道我错过了什么吗？

也许我需要在控件中更改一些值才能显示 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() 找到了一个可行的解决方案。

mat-error 不会出现错误

mat-error doesn't show up on error

angular-material2

angular-validation

angular

angular4-forms

mat-autocomplete