Angular Material MatChipList MatError 在没有焦点的情况下设置错误状态时不可见

Question

我在芯片列表上显示垫错误时遇到了一些问题。根据 this GitHub issue 应明确设置 errorState 以显示垫错误。

此解决方案工作正常，但仅当芯片列表具有焦点时。当 chiplist 未被聚焦时，它不起作用。参见 this example。在我的例子中，当芯片列表没有焦点时，由于一些 API 调用，有效水果列表稍后会发生变化。

chiplist无焦点时如何显示mat-error？

Answer 1

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

组件：

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>

Answer 2

设置 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

Angular Material MatChipList MatError 在没有焦点的情况下设置错误状态时不可见

Angular Material MatChipList MatError not visible when setting errorstate without focus

angular-material

angular-material2

angular