Question

我正在尝试将电子邮件验证应用于芯片。以下是我为达到相同目的所做的尝试。

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

我的要求是在用户输入无效的电子邮件ID时显示错误，并仅突出显示无效的电子邮件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());
}

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

1 个答案: