0

I have a matchip list and I need to show an error if a selection from another input creates duplicates.

<mat-form-field>
  <mat-chip-list #rnList *ngIf="!myData">
    ...
  </mat-chip-list>
  <mat-error *ngIf="rnList?.errorState">{{dupes.join(', ')}} already exist.</mat-error>
</mat-form-field>

When the user changes the other inputs a the list is compared to the selection and the error above should show. A method is ran that does this at the end:

setTimeout(() => {
    this.rnList.errorState = this.dupes.length;
  });

This works, the error shows, but on load the template ngif throws the "Expression has changed after it was checked" error. Typically the setTimeout "trick" fixes this so I moved that condition to a method but that didn't work.

I'm not sure how to address it this time. Examples of errorState use show it done this way (https://stackblitz.com/edit/angular-matchiplist-with-error-message-tsdxfa?file=app%2Fchips-input-example.html).

dcp3450
  • 10,959
  • 23
  • 58
  • 110

0 Answers0