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

如何解决带有电子邮件验证的可重复使用的 Angular Material mat-chip-list 输入

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

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

我对如何解决问题的任何想法持开放态度，我尝试从自定义输入中调用 mat-form-field 中的错误（这不好，我知道），并尝试为mat-form-field，但它也失败了。

我使用的是 Angular 9.1.12 和 Angular Material 9.2.4。

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

解决方法

最后我让它工作了：我使用电子邮件验证器在 Event starttime endtime PriceStart PriceEnd ID 1 Change in Nonfarm Payrolls 2020-03-06 15:15:00 2020-03-06 16:00:00 24763 24876 DJ 2 Change in Nonfarm Payrolls 2020-02-07 15:15:00 2020-02-07 16:00:00 NA NA <NA> 3 Change in Nonfarm Payrolls 2020-01-10 15:15:00 2020-01-10 16:00:00 NA NA <NA> 4 Change in Nonfarm Payrolls 2020-01-10 15:15:00 2020-01-10 16:00:00 NA NA <NA> 5 Change in Nonfarm Payrolls 2020-02-07 15:15:00 2020-02-07 16:00:00 NA NA <NA> 输入上放置了一个 --- COPY /path/entrypoint_*.sh /image/path --- ，当用户想要向输入添加任何内容时，我检查 {{1 }} 已验证。当无效时，我不会将输入值添加到列表中，如果在表单中使用自定义输入，我会在外部 docker run -d --name application_A -p your_port:docker_port --entrypoint /image/path/entrypoint_a.sh your_builded_immage:tag 中调用错误。不是最好的解决方案，所以我愿意接受其他想法。

我还在 ngModel 上使用了额外的验证器，因此如果列表包含无效的电子邮件，则会引发验证错误。

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