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

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

Email validation for Mat-chip-list

angular

angular-material

angular-material2

angular-reactive-forms