时间戳

首页 > 解决方案 > 如何动态更改 mat-chip 中的错误消息

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

问题描述

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

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

我该如何解决它，以便：

虽然列表中存在无效的芯片元素 => 如果列表中只有有效的 emials，则应出现错误消息 => 不应出现错误消息

标签： angulartypescriptangular-materialfrontend

解决方案

补充component.ts：

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

并从其他中删除无效的东西：

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>

推荐阅读