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

Question

我正在尝试将电子邮件验证应用于 mat-chip。以下是我实现相同目标的尝试。

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

我的要求是在用户输入无效的电子邮件 ID 时显示 mat-error 并仅突出显示无效的电子邮件 ID。有人可以帮助我吗？

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