Подтверждение адреса электронной почты для Mat-chip-list

Question

Я пытаюсь применить проверку электронной почты к mat-chip.Ниже моя попытка достичь того же.

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

Мое требование заключается в том, чтобы при вводе недопустимого идентификатора электронной почты отображать ошибку мата и выделять только недопустимый идентификатор электронной почты.Может ли кто-нибудь помочь мне в этом же?

Answer 1

Этого можно добиться, установив свойство для добавленного значения электронной почты, например, недействительное.

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 = '';
    }
}

затем вы можете выделить чип, динамически задав цвет:

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

Live Demo

Для получения дополнительной информации о чипах: https://material.angular.io/components/chips/overview

К вашему сведению, я использовал простой валидатор электронной почты с использованием регулярных выражений:

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());
}