I'm trying to bound an input number using ng-model. If the input number is out of the range it will show a popup hint.
<input type="number" class="input-number" id="bar-length" value="" ng-model="barLength" min="300" max="650" required>
<div class="input-help">
<h4>The length is outside the current range of acceptable values.</h4>
</div>
In CSS it is:
/* Help should show when invalid */
.ng-invalid + .input-help {
display: block;
}
The validation works quite well. However, I want to change the bound range when the units changes from "mm" to "in", so I wrote in Javascript with JQuery:
if (units === "in") {
$("#bar-length").attr("min", 15.75);
$("#bar-length").attr("max", 31.50);
}
It seems that the ng-model boundary does not change accordingly. The popup hint still comes up when the input number is within 15.75 and 31.50. I'm new to this and I got no idea about how to fix it. What should I do?
Don't use jquery unless you wrap it in directives, think in the angularJS mindset, As I pointed out in comments, this is not natively suppoted by angular yet, but you can write directives to make it work:
http://jsfiddle.net/g/s5gKC/3/
var app = angular.module('app', []);
function isEmpty(value) {
return angular.isUndefined(value) || value === '' || value === null || value !== value;
}
app.directive('ngMin', function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, elem, attr, ctrl) {
scope.$watch(attr.ngMin, function(){
ctrl.$setViewValue(ctrl.$viewValue);
});
var minValidator = function(value) {
var min = scope.$eval(attr.ngMin) || 0;
if (!isEmpty(value) && value < min) {
ctrl.$setValidity('ngMin', false);
return undefined;
} else {
ctrl.$setValidity('ngMin', true);
return value;
}
};
ctrl.$parsers.push(minValidator);
ctrl.$formatters.push(minValidator);
}
};
});
app.directive('ngMax', function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, elem, attr, ctrl) {
scope.$watch(attr.ngMax, function(){
ctrl.$setViewValue(ctrl.$viewValue);
});
var maxValidator = function(value) {
var max = scope.$eval(attr.ngMax) || Infinity;
if (!isEmpty(value) && value > max) {
ctrl.$setValidity('ngMax', false);
return undefined;
} else {
ctrl.$setValidity('ngMax', true);
return value;
}
};
ctrl.$parsers.push(maxValidator);
ctrl.$formatters.push(maxValidator);
}
};
});
angular.bootstrap(document.body, ['app']);
Edit: refresh validation state when contraint change
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.