angular - 带有电子邮件验证的可重用 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
解决方案
最后我能够让它工作：我ngModel在mat-chip-list输入上加上电子邮件验证器，当用户想要在输入中添加任何内容时，我检查它ngModel是否有效。当无效时，我不会将输入值添加到列表中，如果在表单中使用自定义输入，我会在外部调用错误mat-form-field。不是最好的解决方案，所以我对其他想法持开放态度。
我还在 上使用了额外的验证器mat-form-field，因此如果列表包含无效的电子邮件，它将引发验证错误。
您可以在上面的 stackblitz 中找到解决方案。