`ng-pattern` - how to check for only numbers?

Question

I am using an ng-pattern to check for ONLY numbers in my input. But for me that's not working. I can able to type in characters after the number. How can I restrict that?

here is my code :

<div ng-app ng-controller="formCtrl">
<form name="myForm" ng-submit="onSubmit()">
    <input type="text" ng-model="price" name="price_field" ng-pattern="/^[0-9]/" required>
    <span ng-show="myForm.price_field.$error.pattern">Not a valid number!</span>
    <input type="submit" value="submit"/>
</form>
</div>

Live Demo

For accepting only number in your text box i think better you can use type="number" in your input tag. — Akshath Kumar, Dec 23 '15 at 06:29
u may refer to this thread: http://stackoverflow.com/questions/19827570/validate-natural-input-number-with-ngpattern — ShivangiBilora, Dec 23 '15 at 06:31

RIYAJ KHAN · Accepted Answer · 2015-12-23T06:36:25.683

38

Use this expression

ng-pattern="/^[0-9]*$/"

UPDATE :

for accepting the only characters,you can use like this.

ng-pattern="/^[a-zA-Z]*$/"

edited Dec 23 '15 at 06:36

answered Dec 23 '15 at 06:30

RIYAJ KHAN

15,032
5
31
53

Ok. for accepting charactors can i use `ng-pattern="/^[a-z][A-Z]*$/"`- ? – user2024080 Dec 23 '15 at 06:31
What is the exact requirement? – RIYAJ KHAN Dec 23 '15 at 06:33
only need to allow characters ( name field ) – user2024080 Dec 23 '15 at 06:33
1

it didn't work for angularjs 1.2.x, it also allows characters – afr0 Apr 04 '19 at 22:31

score 7 · Answer 2 · answered Dec 23 '15 at 06:31

7

Try this regex: It should work /^[0-9]+$/ + sign is for accepting one or more digits.

answered Dec 23 '15 at 06:31

Vishal Rajole

1,504
1
13
19

score 5 · Answer 3 · edited Jul 01 '17 at 11:36

5

ng-pattern="/^[0-9]*$/" //change to

ng-pattern="/^\d{1,10}$/"

NOTE: '\d' can check not only 0-9, also for many digits like greek digits

edited Jul 01 '17 at 11:36

AlokeT

1,086
7
21

answered Dec 23 '15 at 06:39

Ahmed MR-mody

61
1
6

why do want to change it? what is the benefit in this approach? – user2024080 Dec 23 '15 at 07:08

score 1 · Answer 4 · answered Jun 11 '21 at 15:02

1

For reactive form

this.form = fb.group({

  number: ['', [Validators.required, Validators.pattern("^[0-9]*$")]]

})

answered Jun 11 '21 at 15:02

San Jaisy

15,327
34
171
290

`ng-pattern` - how to check for only numbers?

4 Answers4