How to set range validation in AngularJS

Question

I want to set range validation i.e i want salary should be between 100000-20000000. I used ng-min and ng-max. But still its not throwing error message. here is what i have done. Its only checking number validation.

<input ng-model="name2" name="name2" type="text" class="zoomIn" ng-min="100000" ng-max="20000000" ng-pattern="/^\d+$/" placeholder="Your Annual Net Profit" required>
<div ng-messages="step5form.name2.$error">
<div ng-message="min">Please enter a value between 100000 and 20000000.</div>
<div ng-message="max">Please enter a value between 100000 and 20000000.</div>
<div ng-message="pattern">Annual net profit cannot be characters.</div>
</div>

you can use ng-minlength="number" ng-maxlength="number" from angular docs — ngLover
– ngLover, Commented Mar 4, 2016 at 7:05
i tried using minlength and maxlength but then it is not accepting the value between that range and its disabling the next button. — user5397448
– user5397448, Commented Mar 4, 2016 at 7:11
Possible duplicate of Validation not triggered when data binding a number input's min / max attributes — Satej S
– Satej S, Commented Mar 4, 2016 at 7:11
@nglover he is using number validation then type="number" is must. ng-minlength and ng-maxlength will checkcharacters length not numbe. please go through docs carefully. — Amit Sirohiya
– Amit Sirohiya, Commented Mar 4, 2016 at 7:12
i also tried the number type but then its showing the up and down arrow in the input box which i dont want — user5397448
– user5397448, Commented Mar 4, 2016 at 7:14

Amit Sirohiya · Accepted Answer · 2016-03-04 08:24:45Z

2

I think you should try to read AngularJs docs first.

Here you are using type="text" and for type text there are ng-minlength and ng-maxlength whereas for type="number" there are min and max properties.

<input ng-model="name2" name="name2" type="number" class="zoomIn" min="2" max="4" ng-pattern="/^\d+$/" placeholder="Your Annual Net Profit" required>
<div ng-messages="step5form.name2.$error">
<div ng-message="min">Please enter a value between 100000 and 20000000.</div>
<div ng-message="max">Please enter a value between 100000 and 20000000.</div>
<div ng-message="pattern">Annual net profit cannot be characters.</div>

Hope this will help you.

Updated : To remove input spinners add this css

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
input[type="number"] {
    -moz-appearance: textfield;
}

edited Mar 4, 2016 at 8:24

answered Mar 4, 2016 at 7:10

Amit Sirohiya

3331 silver badge13 bronze badges

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

9 Comments

user5397448 Over a year ago

but by putting type= number it shows up and down arrow in the input field.

Amit Sirohiya Over a year ago

To remove that there are ways. Just because there are spinners you cant do that. I have updated my answer please accept it if you found beneficial

user5397448 Over a year ago

i have put the css given by you but still arrows are not going

Amit Sirohiya Over a year ago

I have updated one more css try that and still you have any problem please make a plunker.

user5397448 Over a year ago

plnkr.co/edit/0Og86OO2Z26IRohVGmOF?p=preview here i have created the plunk. also on changing input type to number its not throwing the error message can not accept characters. is there any way to keep input type to text and still able to display the range error message

|

Anil Yadav · Accepted Answer · 2016-03-04 09:32:32Z

0

Use in Angular way:

<input type="number"
       ng-model="string"
       [name="string"]
       [min="string"]
       [max="string"]
       [required="string"]
       [ng-required="string"]
       [ng-minlength="number"]
       [ng-maxlength="number"]
       [pattern="string"]
       [ng-pattern="string"]
       [ng-change="string"]>

Angular Way - More detail

Or by Own Directory

http://jsfiddle.net/webvitaly/AG2wf/1/

answered Mar 4, 2016 at 9:32

Anil Yadav

1,0967 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to set range validation in AngularJS

2 Answers 2

9 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related