CODEWITHSUNDEEP
angularangular-material
Edson Cezar
Edson Cezar

Reputation: 28084

How do I block special characters in an input with Angular Material matInput

How do I block special characters in 

input matInput

I tried to do it this way, but it's not working:

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

Does anyone have any ideas or advice?

Thanks in advance!

Upvotes: 1

Views: 3099

Answers (1)

AVJT82
AVJT82

Reputation: 73337

pattern doesn't restrict the field to only typing what matches the pattern, it just decides if the input entered is valid or not. So you can make a validator and infor the user when an input is not valid. But if you want to completely restrict the user from typing something this is one option:

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

DEMO: Stackblitz

Upvotes: 2

Related Questions