如何使用ngx-mask验证单个输入框中逗号分隔的多个邮箱

要在单个输入框中支持逗号分隔的多邮箱验证，需要同时调整ngx-mask的掩码规则和添加表单验证器，具体操作如下：

1. 调整ngx-mask掩码规则 #

原掩码仅支持单个邮箱，修改为可重复匹配“邮箱+逗号”组合，最后一个邮箱无需尾随逗号：

<input matInput formControlName="documentsRecipients" 
       [dropSpecialCharacters]="false" 
       mask="(A*@A*.S*,)*A*@A*.S*">

• (A*@A*.S*,)*：允许0次或多次重复“邮箱+逗号”的格式
• A*@A*.S*：匹配最后一个不带逗号的邮箱

2. 添加表单验证器 #

掩码仅做格式限制，需通过Angular表单验证器确保每个邮箱的合法性。在组件的表单构建逻辑中添加自定义正则验证：

import { FormBuilder, Validators } from '@angular/forms';

// 组件类内构建表单
constructor(private fb: FormBuilder) {}

myForm = this.fb.group({
  documentsRecipients: ['', [
    Validators.required,
    Validators.pattern(/^([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})(,[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})*$/)
  ]]
});

• 正则表达式确保每个邮箱符合标准格式，且以逗号分隔、无多余尾随逗号

3. 错误提示（可选） #

在模板中添加验证错误提示，优化用户体验：

<mat-error *ngIf="myForm.get('documentsRecipients')?.hasError('pattern')">
  请输入合法的逗号分隔邮箱列表
</mat-error>
<mat-error *ngIf="myForm.get('documentsRecipients')?.hasError('required')">
  此字段为必填项
</mat-error>

内容的提问来源于stack exchange，提问作者Nagnath Mungade