0
votes

I have an angular app in which I have a directive that wraps jquery slider and then there is an input field (type text) in which user can type a number (directive for taking only numbers is setup). This input field and slider share the same model.

Is there a way to restrict the user to not type more than lets say, 30, since, my slider's max value is 30?

Input field takes only two digits and now it should not go beyond 30 value. Do I have to write a directive for per-digit validation or that can be done in controller? Appreciate your help.

www.jsfiddle.net/6vkdw

(This contains directives I used for numbers and slider)

1
How about placing a bind on that input and, if the value entered is bigger than max change it to max? - Romeo Mihalcea
I tried that, not working. As user types lets say 50, the value still shows 50 until he blurs out that input. I was looking something like he/she cant type '5' in the tens place at the first place. Is it possible? - srikar sastry
I found the solution: $scope.$watch('transaction1', function(){ if($scope.transaction1 > 30){ $scope.transaction1 = 30; } }); I guess my binding was incorrect. Thank you Romeo. - srikar sastry
@srikarsastry Welcome to Stack Overflow! Your own answer to your question is as valid as anyone else's; if you post it as such, rather than just in the comments, and then accept it, the site will show it as an answered question, which will be of much greater use to others looking for a solution to the same problem. - Aaron Miller
Why not make the input a type="number" with min and max attributes? - Davin Tryon

1 Answers

0
votes

I found the solution: $scope.$watch('transaction1', function(){ if($scope.transaction1 > 30){ $scope.transaction1 = 30; } }); I guess my binding was incorrect.