Mat-chip-list的电子邮件验证

Question

I am trying to apply email validation to mat-chip. Below is my attempt to achieve the same.

https://stackblitz.com/edit/mat-chip-demo-yvmxsk

My requirement is to display an mat-error when user enters an invalid email ID and highlight only invalid email ID. Can someone help me on the same?

Answer 1

You can achieve this by setting a property on the added email value such as invalid.

add(event): void {
    console.log(event.value)
    if (event.value) {
      if (this.validateEmail(event.value)) {
        this.emailList.push({value:event.value, invalid:false});
      }else{
        this.emailList.push({value:event.value, invalid:true}); 
      }
    }
    if (event.input) {
      event.input.value = '';
    }
}

then, you can highlight the chip by dynamically setting the color:

<mat-chip [color]="(item.invalid)?'warn':''" selected />

Live Demo

For more info about chips: https://material.angular.io/components/chips/overview

FYI, I used a simple email validator using regex:

private validateEmail(email) {
  var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(String(email).toLowerCase());
}