ng-pattern issue with input type number

Question

I am facing one weird issue when trying to use ng-pattern with input type number.

<input type="number" name="input" min="0" max="1000" data-ng-model="input" ng-pattern="/^[0-9]*$/">
    <div data-ng-if="Form.input.$error.pattern">Please enter an Integer number between 0 and 1000.</div>
</div>

As per my regular expression defined, error should be shown when user input 1.. Right?

However, it does not show error when type 1. but shows error for input 1.1 Why not for 1.?

Anything im missing here?

Try changing the type to text instead of a number and the regex to /^(?:[0-9][0-9]?[0-9]?|1000)$/. — Wiktor Stribiżew
– Wiktor Stribiżew, Commented Sep 16, 2015 at 12:55
@ stribizhev, the problem with type to text is i can't capture min max error than. Did you get my point? — TheKingPinMirza
– TheKingPinMirza, Commented Sep 16, 2015 at 15:12
Why? You can with my regex. If you want to disallow leading zeros, use ^(?!0+[1-9])(?:[0-9][0-9]?[0-9]?|1000)$. — Wiktor Stribiżew
– Wiktor Stribiżew, Commented Sep 16, 2015 at 15:12
@stribizhev, just last point what if i want to allow numeric values ? for example, user can enter either 1000 or 1.1 as well. How would write regex? — TheKingPinMirza
– TheKingPinMirza, Commented Sep 16, 2015 at 16:44

Wiktor Stribiżew · Accepted Answer · 2015-09-17 08:16:53Z

3

To allow numbers from 0 to 190 (including 190.0000) you can use type="text" and then use the following regex:

^(?:(?:\d{1,2}|1[0-8]\d)(?:\.\d+)?|190(?:\.0+)?)$

See demo

^ - The beginning of string anchor (only match the rest if it appears right at the beginning of string, else fail the match)
(?:(?:\d{1,2}|1[0-8]\d)(?:\.\d+)?|190(?:\.0+)?) - a non-capturing group that is just used for grouping and not remembering the captured text. It contains 2 alternatives:
- (?:\d{1,2}|1[0-8]\d)(?:\.\d+)?:
  - (?:\d{1,2}|1[0-8]\d) - Either 1 or 2 any digits (\d{1,2}) or 1 followed by 0, 1...8, and then followed by any 1 digit.
  - (?:\.\d+)? - optionally (as ? means match 1 or 0 times) match a dot and 1 or more digits.
- 190(?:\.0+)? - matches 190 and then optionally . and 1 or more 0 characters.
$ - assert the end of string (if there are more characters after the preceding pattern, no match is found).

The non-capturing group can be replaced with a capturing group in your case without any visible change in the efficiency and behavior. However, capturing groups keep the text they capture in some buffer, thus are supposed to be slower (though it is really insignificant). Also, capturing groups are necessary when back-references are used in the pattern (when you want to match already matched substrings), but it is not the case here.

edited Sep 17, 2015 at 8:16

answered Sep 17, 2015 at 5:24

Wiktor Stribiżew

631k41 gold badges502 silver badges632 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

TheKingPinMirza Over a year ago

Yes, it is working as expected. thanks for your time.

Wiktor Stribiżew Over a year ago

I am also sorry I did not find time to explain this, I will add the clarifications ASAP.

TheKingPinMirza Over a year ago

thanks you, appreciated your attention. waiting for your explanation.

Mohit Pandey · Accepted Answer · 2015-09-16 12:26:16Z

0

Your regex works perfectly for me.

<input type="number" name="input" min="0" max="1000" data-ng-model="input" ng-pattern="/^[0-9]*$/">
    <div data-ng-if="Form.input.$error.pattern">Please enter an Integer number between 0 and 1000.</div>
</div>

Here is the demo link: http://plnkr.co/edit/HV2PAPP2gh6cH8KXyYav?p=preview

answered Sep 16, 2015 at 12:26

Mohit Pandey

3,8597 gold badges28 silver badges38 bronze badges

Collectives™ on Stack Overflow

ng-pattern issue with input type number

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related