AngularJS ngMin/ngMax
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.js"></script>
<form name="myForm" ng-init="min = 300; max = 650" novalidate>
Min:
<input type="number" ng-model="min" />
<br>
Max:
<input type="number" ng-model="max" />
<br>
Value:
<input type="number" ng-model="value" ng-min="min" ng-max="max" name="value" />
<div class="input-help">
<h4>The length is outside the current range of acceptable values.</h4>
</div>
<br>
<tt>value = {{value}}</tt>
<br>
<tt>value.$valid = {{myForm.value.$valid}}</tt>
<br>
<tt>value.$error = {{myForm.value.$error}}</tt>
</form>
CSS
.input-help {
display: none
}
/* Help should show when invalid */
.ng-invalid + .input-help {
display: block;
}
JavaScript
var app = angular.module('app', []);
angular.bootstrap(document.body, ['app']);