如何动态更改 mat-chip 中的错误消息 [英] How to change the error message in mat-chip dynamically

问题描述

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

I have this demo in stackblitz, https://stackblitz.com/edit/mat-chip-demo-dhm17z

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

It checks for email validation, but there is a bug in the code in the error message "Invalid email ID " , the error message appears also if there is no invalid emails in the listing after removing the invalid emails.

我该如何解决它，以便:

how can i fix it, so that:

虽然列表中有无效的筹码元素=>应该出现错误信息如果列表中只有有效的 emials =>不应出现错误消息

While there is an invalid chip element in the listing => error message should appear if there is only valid emials in the listing => error message should not be appear

推荐答案

在component.ts中添加:

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

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

and remove the invalid thing from 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>

这篇关于如何动态更改 mat-chip 中的错误消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！