Как я могу добавить нестандартный угловой материал мат-ошибка

Question

У меня есть список элементов, и теперь я добавляю данные из поля ввода в этот список. Я хотел бы показать mat-error для повторяющейся записи под этим полем ввода.

<mat-form-field>
    <input matInput (keyup)="validation()" [(ngModel)]="package">
    <mat-error>Duplicate Entry</mat-error>
</mat-form-field>   

Предложите мне правильный способ решения такой проблемы.

Answer 1

1. Вам необходимо использовать * ngIf, чтобы скрыть или показать ошибку .Возьмите переменную и сделайте ее истинной, если найден дубликат.

пример: <mat-error *ngIf="duplicateFound">Duplicate Entry</mat-error>

когда пользователь вводит новый элемент, необходимо проверить из текущего списка элементов , если он уже присутствует, а затем установить duplicateFound в значение true

ваш шаблон

<input matInput (keyup.enter)="validation()" [(ngModel)]="package">

ваш компонент

duplicateFound: boolean = false;
items = [];

validation() {
  items.forEach(item => {
    if (item === this.package) {
      this.duplicateFound = true; // now your error will be displayed in browser
    }
  });
}

Answer 2

Я редко использую управляемые шаблоном формы.Я думаю, что вы хотите вот так

<mat-form-field>
  <input matInput (keyup)="validation()" [(ngModel)]="package" name="package" #package="ngModel">
  <mat-error *ngIf="package.invalid">Duplicate Entry</mat-error>
</mat-form-field>

Добавьте нужное вам сообщение об ошибке в mat-error

проверьте эту ссылку https://angular.io/guide/forms#show-and-hide-validation-error-messages