angular-dynamic-number icon indicating copy to clipboard operation
angular-dynamic-number copied to clipboard

If you can supported maximum value validation?

Open SumailXu opened this issue 8 years ago • 9 comments

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?

SumailXu avatar Jul 11 '16 11:07 SumailXu

And also a minimum value would be very nice, too

schinken avatar Aug 16 '16 13:08 schinken

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.

uhlryk avatar Aug 28 '16 13:08 uhlryk

Min and max would be great

surfjedi avatar Sep 29 '16 01:09 surfjedi

can somebody solve it?

felipe-vargas-inrae avatar Mar 01 '17 13:03 felipe-vargas-inrae

any news?

WuglyakBolgoink avatar Oct 04 '17 12:10 WuglyakBolgoink

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 image

gjeanmart avatar Oct 05 '17 13:10 gjeanmart

What das "show-errors" do?

schinken avatar Oct 05 '17 13:10 schinken

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

gjeanmart avatar Oct 05 '17 14:10 gjeanmart

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 :)

zesda avatar Feb 14 '18 15:02 zesda