可重用的Angular Material垫片-芯片列表输入与电子邮件验证



我需要一个可重用的mat-chip-list输入,它知道以下内容:可以在输入中键入任何内容,但只能将有效的电子邮件地址添加到芯片列表中。如果输入中有一个无效的电子邮件,用户按下ENTER,COMMATAB,则输入值不能添加到列表中,mat-form-field应该有错误。

我有一个工作的例子,但这是不可重复使用的mat-form-field的输入,我需要复制粘贴它每次我想使用它:(

我对如何解决问题的任何想法都是开放的,我试图从自定义输入调用mat-form-field中的错误(这不是很好,我知道),我试图为mat-form-field创建一个特殊的验证器,但它也失败了。

我使用的是Angular 9.1.12 &角材质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中找到解决方案。

最新更新