如何使用Angular Material matInput阻止输入中的特殊字符

Question

如何阻止

中的特殊字符

input matInput

我试图用这种方式来做，但是它不起作用：

<input matInput [(ngModel)]="data" placeholder="data" [ngModelOptions]="{standalone: true}" pattern="^[a-zA-Z0-9]+$" value="" maxlength="7">

有人有什么想法或建议吗？

谢谢！

Answer 1

pattern不仅将字段限制为仅键入与模式匹配的内容，而只是确定输入的输入是否有效。因此，您可以创建一个验证器，并在输入无效时通知用户。但是，如果您要完全限制用户键入内容，则这是一种选择：

<input keypress="return String.fromCharCode(event.charCode).match(/[^a-zA-Z0-9]/g) === null">

演示：Stackblitz