AngularJs : Set conditional min and max value for validation in number input field

Question

I have created a web page which contains a form with two number input fields field1 and field2. I'm doing the validation on these fields. field1 has a min value 1 and max value 100000 but field2 should have min value is max of field1 or 1, anything which is greater and max is 100000. I tried to assign the ng-model of field1 as min of field2 but it not working.

<div class="row">
  <div>
    <input ng-model="priceminrange" name="priceminrange" type="number"
    class="form-control" value="" placeholder="MinRange" min="1" max="100000">
    <span ng-show="form.priceminrange.$error.number">The value is not a valid number</span> 
    <span ng-show="form.priceminrange.$error.min || form.priceminrange.$error.max">
    The value must be in range 1 to 100000</span>
  </div>
  <div>
    <input ng-model="pricemaxrange" name="pricemaxrange" type="number"
    class="form-control" value="" placeholder="MaxRange" min={{priceminrange}} max="100000">
    <span ng-show="form.pricemaxrange.$error.number">The value is not a valid number</span> 
    <span ng-show="form.pricemaxrange.$error.min || form.pricemaxrange.$error.max">
    The value must be in range {{priceminrange}} to 100000</span>
    form.pricemaxrange.$error = {{form.pricemaxrange.$error}}
  </div>
</div>

Michael Venable · Accepted Answer · 2016-06-01 20:07:45Z

8

You were close. The object priceminrange is an Angular object that contains several methods and properties, all relating to the model. The property you want is called $modelValue, which contains the value entered by the user after it is parsed to its correct data type (number in this case).

Something like this should work, assuming you have wrapped the input elements in a form named "form."

<input ng-model="pricemaxrange" type="number" min="{{form.priceminrange.$modelValue}}">

answered Jun 1, 2016 at 20:07

Michael Venable

5,0413 gold badges25 silver badges21 bronze badges

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

Comments

Eder Ribeiro · Accepted Answer · 2015-03-21 15:40:14Z

2

Try this

On controller create scope.

$scope.priceminrange = 1;

answered Mar 21, 2015 at 15:40

Eder Ribeiro

6641 gold badge4 silver badges7 bronze badges

Collectives™ on Stack Overflow

AngularJs : Set conditional min and max value for validation in number input field

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related