角材料MatChipList MatError在设置无焦点错误状态时不可见

Question

我在一位芯片师上显示了一个垫子错误时遇到了一些麻烦。根据这个GitHub问题，应该显式地设置errorState以显示mat错误。

这个解决方案很好，但只有在芯片师有重点的情况下。当芯片师没有聚焦时，它就不起作用了。见这个例子。在我的例子中，当chiplist没有焦点时，由于某些API调用，有效的果实列表稍后会发生变化。

当晶片师没有焦点时，我如何显示垫子错误？

Answer 1

设置errorState似乎没有焦点，占位符和下划线显示为red。

我怀疑您也需要mat-error来显示，但是，您正在丢失您的*ngIf。

<mat-error *ngIf="chipList.errorState">Too many chips</mat-error>

STACKBLITZ

https://stackblitz.com/edit/angular-matchiplist-with-error-message-tsdxfa?file=app/chips-input-example.html

Answer 2

您应该添加验证器并防止无效项的添加，如下所示。例如，For：

构成部分：

export class ExampleComponent {
    items = [];
    emailFormControl = new FormControl('', [Validators.email]);

    addItem(event) {
        if (this.emailFormControl.valid) {
            items.push(event.value)
        }
    }

    .
    .
    .
}

模板：

<mat-form-field>
    <mat-chip-list [formControl]="emailFormControl">
        .
        .
        .
    </mat-chip-list>
</mat-form-field>