带有电子邮件验证的可重用 Angular Material mat-chip-list 输入答案

【问题标题】：Reusable Angular Material mat-chip-list input with email validation带有电子邮件验证的可重用 Angular Material mat-chip-list 输入
【发布时间】：2021-03-10 08:36:34
【问题描述】：

我需要一个可重复使用的mat-chip-list 输入，它知道以下内容：可以在输入中输入任何内容，但只能将有效的电子邮件地址添加到芯片列表中。如果输入中包含无效的电子邮件并且用户按ENTER、COMMA 或TAB，则无法将输入值添加到列表中，mat-form-field 应该有错误。

我有一个工作示例，但它不能作为mat-form-field 的输入重复使用，每次我想使用它时都需要复制粘贴它:(

我对如何解决问题持开放态度，我尝试从自定义输入中调用 mat-form-field 中的错误（我知道这不太好），并且我尝试为 @ 创建一个特殊的验证器987654329@，但也失败了。

我正在使用 Angular 9.1.12 和 Angular Material 9.2.4。

这是一个新的可重用但不能工作的组件和不可重用但工作的组件的示例：https://stackblitz.com/edit/angular-material-chip-list-email-input

【问题讨论】：

标签： angular angular-material mat-form-field mat-input

【解决方案1】：

最后我能够让它工作：我在mat-chip-list 输入上放置了一个ngModel 和电子邮件验证器，当用户想要在输入中添加任何内容时，我检查ngModel 是否有效。当无效时，我不会将输入值添加到列表中，如果在表单中使用自定义输入，我会在外部 mat-form-field 中调用错误。不是最好的解决方案，所以我对其他想法持开放态度。

我还在mat-form-field 上使用了额外的验证器，所以如果列表包含无效的电子邮件，它会抛出验证错误。

您可以在上面的 stackblitz 中找到解决方案。

【讨论】：