Angular Input Type PASSWORD and NUMBER

Question

How do I make my input field only accept numbers (don't allow ANY letters to be inputted) and also hide the inputted values? It is taking a sensitive number. This also needs to keep the max and minlength validation at 4.

Here is what is not working:

<input matInput type="password" pattern="[0-9]*"  minlength="4" maxlength="4" placeholder="Last Four of SSN" formControlName="ssn" required>

Does this answer your question? [Angular2 - Input Field To Accept Only Numbers](https://stackoverflow.com/questions/41465542/angular2-input-field-to-accept-only-numbers) — Edric, Aug 07 '20 at 06:30
No, need to hide inputted values, accept only numbers, and have a min and max length set to 4. — John Man, Aug 07 '20 at 06:36

Kirubel · Answer 1 · 2020-08-07T07:06:22.943

1

Try this regex for your pattern

[pattern]="'^[0-9]{4}$'"

edited Aug 07 '20 at 07:06

answered Aug 07 '20 at 06:29

Kirubel

1,461
1
14
33

This works BUT stops allowing maxlength="4" to work. – John Man Aug 07 '20 at 06:34
I think this is very close but: ERROR SyntaxError: Invalid regular expression: /^[0-9]{4,4}*$/: Nothing to repeat – John Man Aug 07 '20 at 06:39
I was wrong: IS NOT working. – John Man Aug 07 '20 at 06:50
That gives the error: ERROR SyntaxError: Invalid regular expression: /^[0-9]*{4}$/: Nothing to repeat – John Man Aug 07 '20 at 06:59
This pattern means you can have digits and exactly `4` character length. – Kirubel Aug 07 '20 at 07:10

score 0 · Answer 2 · answered Aug 07 '20 at 06:36

0

Do not forget to set also the angular validator for this form field (own validator or pattern validator)

answered Aug 07 '20 at 06:36

Thorsten Rintelen

549
4
19

Angular Input Type PASSWORD and NUMBER

2 Answers2