angular-dynamic-number
angular-dynamic-number copied to clipboard
If you can supported maximum value validation?
Well,this is a good angular directive. I need validation input value's maximum value, my custom directive like this:
ctrl.$validators.max = function(modelValue, viewValue){
var val = modelValue || viewValue;
if(ctrl.$isEmpty(val) || !max || !numberPattern.test(val)){
return undefined;
}
return val <= max;
};
It works well,when validation fails,and exceed max length(It is set up by numInt attributes). input value will become '0'.
Finally,I can't used my custom directive to validation maximum value,can you provide a attribute to set up maximum value?
And also a minimum value would be very nice, too
Implementation doesn't look too hard. But I have objection how it should work.
For example you set min value to 1234,12345
. Now user want to type value 99
. To do this he type first number 9
. Directive doesn't know when value is typed, it just checks actual value. Therefore it checks if value 9
is bigger then min value. And it isn't. What then? Less problematic is max value but I also see UX problems.
Min and max would be great
can somebody solve it?
any news?
I've built a directive that works for me . If it can help someone ...
Javascript
app.directive('minMaxValidator', function() {
return {
restrict: 'A',
require: '^form',
link: function($scope, element, attrs, ctrl) {
var validatorMin = function (ngModelValue) {
if(!attrs.min || attrs.min === null || attrs.min === undefined || isNaN(attrs.min)) {
return true;
}
if(ngModelValue === undefined || ngModelValue===null || ngModelValue==="") {
return true;
}
if (!isNaN(ngModelValue)) {
var value = parseInt(ngModelValue);
var min = parseInt(attrs.min);
return (value >= min);
} else {
return false;
}
};
var validatorMax = function (ngModelValue) {
if(!attrs.max || attrs.max === null || attrs.max === undefined || isNaN(attrs.max)) {
return true;
}
if(ngModelValue===undefined || ngModelValue===null || ngModelValue==="") {
return true;
}
if (!isNaN(ngModelValue)) {
var value = parseInt(ngModelValue);
var max = parseInt(attrs.max);
return (value <= max);
} else {
return false;
}
};
ctrl[attrs.name].$validators['minValidator'] = validatorMin;
ctrl[attrs.name].$validators['maxValidator'] = validatorMax;
}
};
});
HTML
<div class="form-group col-sm-6 col-md-6 col-lg-6" show-errors >
<label class="control-label">Term</label>
<input type="text"
class="form-control"
name="term"
ng-model="term"
awnum="uint"
min-max-validator
ng-min="termMin"
ng-max="termMax">
<div class="validation help-block">
<span ng-if="form.term.$error.minValidator || form.term.$error.maxValidator>
This field must be between {{termMin}} & {{termMax}}
</span>
</div>
</div>
That give a result like that
What das "show-errors" do?
That's a nice Angular plugin to show form error validation: https://github.com/paulyoder/angular-bootstrap-show-errors. Basically, it's just manipulate CSS classes if a field has an $error
Bear in mind that @gjeanmart's solution will only work for integers due to the parseInt
within the validators, stumped me for a good while :)