如何动态更改mat-chip中的错误信息

问题描述

我在 stackblitz 中有这个演示，https://stackblitz.com/edit/mat-chip-demo-dhm17z

它会检查电子邮件验证，但 error message “无效的电子邮件 ID”中的代码存在错误 " ，如果在删除无效电子邮件后列表中没有无效电子邮件，也会出现错误消息。

我该如何修复它，以便：

虽然列表中有一个无效的芯片元素 => 应该出现错误消息 如果列表中只有有效的符号 => 不应出现错误消息

解决方法

在 component.ts 中添加：

areEmailsInvalid(): boolean {
  return this.emailList.some(email => !this.validateEmail(email.value));
}

并从 else 中删除无效的东西：

else {
  this.emailList.push({ value: event.value,invalid: true });
}

也在 component.html 中更改：

<mat-error *ngIf="rulesForm.get('emails').hasError('incorrectEmail')">Invalid email ID</mat-error>

进入这个：

<mat-error *ngIf="areEmailsInvalid()">Invalid email ID</mat-error>