restrict special character in HTML input box using Angular 7

Question

I need to restrict special character in html input box with Angular 7. Similarly I have some other requirement like to enter only number, letter etc.

Am new to Angular, any help will be appreciated.

I tried with some below code:

<input type="text" maxlength="45" class="form-control" id="hno" [(ngModel)]="Address.number" pattern="^[^`~!@#$%\^&*()_+={}|[\]\\:';"<>?,./]*$">

Instead of dissallowing special characters, you should write expression for allowed characters. — Saksham, Apr 17 '19 at 12:23
You can also create directive for same as you also have some other requirement also like enter only number or letter, So creating different directive for each requirement will be better idea — Abhishek, Apr 17 '19 at 12:35

Ildar Akhmetov · Answer 1 · 2019-04-17T12:13:35.493

0

Your pattern attribute should look like this:

pattern="[^`~!@#$%\^&*()_+={}|[\]\\:';<>?,./\x22]*"

Firstly, you should NOT use ^ and $ because you match every single character with this pattern.

Secondly, there is a problem with the " character. So for now I just removed it from the class, will look more into it.

UPD: Found a solution for a quote character here. \x22 works as " character.

edited Apr 17 '19 at 12:13

answered Apr 17 '19 at 12:06

Ildar Akhmetov

Sorry, its not working for me. I am able to enter special character into the input box – user11335918 Apr 17 '19 at 12:20
`pattern` attribute of HTML5 works when you try to submit the form. – Ildar Akhmetov Apr 17 '19 at 12:21
Sometime ago, I made a directive, see https://stackoverflow.com/questions/54460923/angular-2-restrict-input-field. If you use `[mask]="'^[A-Z|a-z|0-9]+$'"` can be work – Eliseo Apr 17 '19 at 12:59

1 Answers1