2

I need a reusable mat-chip-list input, which knows the following: can type anything in the input, but only valid email addresses can be added to the chip list. If the input has an invalid email in it and user presses ENTER, COMMA or TAB, then the input value cannot be added to the list and the mat-form-field should have an error.

I have a working example, but that's not reusable as mat-form-field's input and I need to copy-paste it every time I want to use it :(

I am open to any ideas how to solve the problem, I tried to invoke an error in the mat-form-field from the custom input (which is not nice, I know) and I tried to create a special validator for the mat-form-field, but it also failed.

I'm using Angular 9.1.12 & Angular Material 9.2.4.

Here is an example for a the new reusable, but not working component and the not reusable but working component: https://stackblitz.com/edit/angular-material-chip-list-email-input

Szandra
  • 31
  • 4

1 Answers1

1

Finally I was able to make it work: I put an ngModel on the mat-chip-list input with email validator and when the user wants to add anything to the input, I check if the ngModel is valid. When not valid, I won't add the input value to the list and if the custom input is used in a form, I invoke an error in the outer mat-form-field. Not the best solution, so I'm open to an other ideas.

I also used extra validator on the mat-form-field, so if the list contains a invalid email, it will throw validation error.

You can find the solution in the stackblitz above.

Szandra
  • 31
  • 4