如何动态更改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));
}

并从其他位置删除无效的东西

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屋！