I have two fields which both take numbers. One must always be higher than the other. For example you can have a field for age, and then a field for older sibling age which of course must be greater depending on the first field.
My fields are like this:
<input type="number" ng-model="age" required>
<input type="number" ng-model="olderSiblingAge" required>
I've tried using min="age" in the olderSibling input, but no luck, can still go below it.
You have to interpolate the value like this: min="{{vm.age}}" as specified in the number input documentation regarding to AngularJS.
angular
.module('app', [])
.controller('ctrl', function() {
var vm = this;
vm.age = 1;
vm.olderSiblingAge = 2;
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl as vm">
<label> Age </label> <br />
<input type="number" ng-model="vm.age" required ng-change="vm.olderSiblingAge = vm.age">
<br /><br />
<label> Older sibling age </label> <br />
<input type="number" ng-model="vm.olderSiblingAge" required min="{{vm.age}}">
</div>Note: I've used the controller-as syntax. Of course you can use it as your were doing it with the $scope notation like this min="{{age}}"
TRY USING THIS CODE
<input type="number" ng-model="age" required>
<input type="number" ng-change="olderSiblingAge = (olderSiblingAge < age)?age+1:olderSiblingAge" ng-model="olderSiblingAge" required>
To achieve expected result, use below option of using ng-blur to compare entered values
code sample https://codepen.io/nagasai/pen/XEJpYa?editors=1010
HTML:
<div ng-app="test" ng-controller="testCtrl">
Age <input type="number" ng-model="age" required>
Sibling Age <input type="number" ng-model="olderSiblingAge" required ng-blur="check()">{{olderSiblingAge}}
</div>
JS:
var app = angular.module('test',[]);
app.controller('testCtrl',function($scope){
$scope.check = function(){
if($scope.age > $scope.olderSiblingAge){
$scope.olderSiblingAge = null
alert("older sibling age should be greater than age")
}
}
})
min="{{age}}"