在 Angular 项目中使用 ngx-mask 实现自定义掩码时，若启用了 [showMaskTyped]="true"，特殊字符 @ 会意外被拦截，而其他字符（如字母、数字及 $%~）正常；根本原因是 ngx-mask 默认将 @ 视为预设特殊字符并过滤，需显式清空 specialCharacters 数组以解除限制。
在 angular 项目中使用 ngx-mask 实现自定义掩码时，若启用了 `[showmasktyped]="true"`，特殊字符 `@` 会意外被拦截，而其他字符（如字母、数字及 `$%~`）正常；根本原因是 `ngx-mask` 默认将 `@` 视为预设特殊字符并过滤，需显式清空 `specialcharacters` 数组以解除限制。
当你在输入框中配置了自定义 pattern（如 B: { pattern: /[a-zA-Z0-9@$%~]/ }）并启用 [showMaskTyped]="true" 时，ngx-mask 会在实时显示掩码字符的同时，对输入内容进行双重校验：不仅检查是否匹配 patterns，还会依据内部维护的 specialCharacters 白名单（默认包含 @, ., -, _, +, =, !, *, /, ?, &, #, %, ~, $, ^, , |, [, ], {, } 等）过滤掉未显式声明的“特殊符号”。尽管 @ 出现在你的正则表达式中，但它仍被默认 specialCharacters 列表拦截，导致输入失效。
✅ 正确解决方案是显式覆盖默认特殊字符列表，通过 [specialCharacters]="[]" 清空该数组，从而完全交由 patterns 控制字符合法性：
<input id="otp" class="form-control" name="otp" formcontrolname="otp" mask="BBBBBBBBBB">
对应组件 TypeScript 中保持原有 pattern 定义即可：
this.customPatterns = {
B: { pattern: new RegExp('[a-zA-Z0-9@$%~]') }
};
⚠️ 注意事项：
- specialCharacters 是 ngx-mask 的关键控制开关，即使设置了 dropSpecialCharacters="false"，若未清空 specialCharacters，默认列表仍会干预输入行为；
- showMaskTyped="true" 会触发更严格的实时输入校验流程，因此必须同步配置 specialCharacters；
- 不建议使用 dropSpecialCharacters="true" 来绕过问题，这会导致合法字符被意外丢弃；
- 升级到 ngx-mask@17.0.4（适配 Angular 17）后，该行为更加严格，务必显式声明 specialCharacters。
总结：@ 的输入失败并非正则表达式问题，而是 ngx-mask 内部特殊字符白名单机制与 showMaskTyped 联动所致。只需添加 [specialCharacters]="[]"，即可让掩码逻辑完全遵循你定义的 patterns，兼顾功能完整性与用户体验。
