Как заблокировать специальные символы на входе с помощью 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">

DEMO: Stackblitz