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

问题描述

我在 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 appearif 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中的错误信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！