How to set ng-pattern for numbers in HTML/Angular

Question

I've few doubts/huddles for my page

1). I've a input control. It should only allow user to enter between 1 to 5. If user tries to enter maximum of 5, error should be thrown. will ng-pattern="/^[1-5]*$/" correct?

<input type="text" ng-model="MovieRating" class="form-control" name="MovRate" ng-pattern="/^[1-5]*$/" required />
<span ng-show="adduserform.MovClafictn.$error.pattern" class="spnmsg">Rating should be 1 to 5</span>

2)Have one more input control which should be entered 4 digits only. Less than that/More of it should trigger validation. (Actually this control for entering year value)

Plus how can i validate user has entered valid year.....For ex:user enters 5555, i should throw error.....!! — Vino Spartan
– Vino Spartan, Commented Apr 5, 2015 at 15:00
use ng-pattern= /19[789]\d|20[01]\d/g for allowing user to enter only 1979 to 2019 — mohamedrias
– mohamedrias, Commented Apr 5, 2015 at 15:05

mohamedrias · Accepted Answer · 2015-04-05 15:06:22Z

3

 ng-pattern="/^\d{5}$/"

This will allow user to enter only 5 digit number.

You can also make use of ng-maxlength as well for specifying the length and input type="number" for allowing only numbers.

Similarly if you want to allow only between 1 to 5, then set min="1" max="5" in your input type="number"

Regarding valid year:

ng-pattern = "/19[789]\d|20[01]\d/g"

This will allow from 1979 to to 2019

Else even simple ng-pattern = "^(19|20)\d{2}$" will match from 1900 to 2099

edited Apr 5, 2015 at 15:06

answered Apr 5, 2015 at 14:54

mohamedrias

18.6k3 gold badges41 silver badges47 bronze badges

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

2 Comments

Vino Spartan Over a year ago

Am i missing something....

<input type="text" ng-model="MovDate" class="form-control" name="MovDate" ng-pattern="^(19|20)\d{2}$" required  />                         </div>                             <span ng-show="adduserform.MovDate.$error.required" class="spnmsg">Field must not be empty</span>                             <span ng-show="adduserform.MovDate.$error.pattern" class="spnmsg">Should be valid Year</span>                          </span>

Above code not triggering validation

mohamedrias Over a year ago

try this with previous condition : ng-pattern = "/^(19|20)\d{2}$/g" we missed //

Collectives™ on Stack Overflow

How to set ng-pattern for numbers in HTML/Angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related