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>

Solution 1

Try this

On controller create scope.

$scope.priceminrange = 1;

Solution 2

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}}">