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).