Блог

У меня возникли некоторые проблемы с отображением mat-ошибки в chiplist. В соответствии с этой проблемой GitHub errorState , значение должно быть установлено явно, чтобы показывать ошибку mat-error.

Это решение работает нормально, но только тогда, когда список элементов имеет фокус. Это не работает, когда список файлов не сфокусирован. Смотрите этот пример. В моем случае список допустимых результатов изменяется позже из-за некоторого вызова API, когда список элементов не имеет фокуса.

Как я могу показать ошибку mat-error, когда список файлов не имеет фокуса?

Настройка 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

Вы должны добавить средство проверки и предотвратить добавление недопустимого элемента следующим образом. Например:

Компонент:

 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>