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, Sep 16 '15 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, Sep 16 '15 at 15:12
Why? You can with [my regex](https://regex101.com/r/eJ6gR9/1). If you want to disallow leading zeros, use [`^(?!0+[1-9])(?:[0-9][0-9]?[0-9]?|1000)$`](https://regex101.com/r/eJ6gR9/2). — Wiktor Stribiżew, Sep 16 '15 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, Sep 16 '15 at 16:44
@ stribizhev, looks excellent. What if i just want to allow maximum number part to 190? and if when user type 191 it should not match to regex. — TheKingPinMirza, Sep 16 '15 at 18:06
Sorry my max value is 190. Anything above it should be invalid. For example, valid ones could be 189.9999........, 189, 190, 190.0 and invalid are 190.1 Hope you get my point — TheKingPinMirza, Sep 16 '15 at 18:15
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/89846/discussion-between-immirza-and-stribizhev). — TheKingPinMirza, Sep 16 '15 at 18:31
Yes i checked, your regex allows 190.99999 that i dont want to allow.Anything above 190 should be invalid. For example, valid ones could be 189.9999........, 189, 190, 190.0 and invalid are 190.1 Hope you get my point — TheKingPinMirza, Sep 16 '15 at 18:38
Works absolutely fine except it also marks invalid 190.0 whereas it should accept this value. because 190.0 is not greater than 190 — TheKingPinMirza, Sep 17 '15 at 03:02

Wiktor Stribiżew · Accepted Answer · 2015-09-17T08:16:53.250

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.

I am also sorry I did not find time to explain this, I will add the clarifications ASAP. — Wiktor Stribiżew, Sep 17 '15 at 08:09
thanks you, appreciated your attention. waiting for your explanation. — TheKingPinMirza, Sep 17 '15 at 08:10

score 0 · Answer 2 · answered Sep 16 '15 at 12:26

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

ng-pattern issue with input type number

2 Answers2