Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

My project has a form with around 16 text fields. The input needs to be numeric, and different fields will have different min/max values. I was able to find the following jsfiddle (http://jsfiddle.net/thomporter/DwKZh/) and adapt the parsing to the following (http://jsfiddle.net/WdBju/):

angular.module('myApp', []).directive('numbersOnly', function(){  
   return {  
     require: 'ngModel',  
     link: function(scope, element, attrs, modelCtrl) {  
       modelCtrl.$parsers.push(function (inputValue) {  

           if (inputValue == undefined) {  
               return '';  
           }  

           var firstParse = inputValue.replace(/[^0-9 . -]/g, '');  

           var safeParse = firstParse.charAt(0);  
           var prepParse = firstParse.substring(1,firstParse.length);   

           var secondParse = safeParse + prepParse.replace(/[^0-9 .]/g, '');  

           var n = secondParse.indexOf(".");  
           var transformedInput;  

           if (n == -1) {  
               transformedInput = secondParse;  
           }  
           else {  
               safeParse = secondParse.substring(0,n+1);  
               firstParse = (secondParse.substring(n+1,secondParse.length)).replace(/[^0-9]/g, '');  
               n = 2;  

               if (firstParse.length <= n) {  
                   transformedInput = safeParse + firstParse;  
               }  
               else {  
                   transformedInput = safeParse + firstParse.substring(0,n);  
               }  
           }  

           var min = -25;  
           var max = 25;  

           if (transformedInput!=inputValue ||   
               transformedInput < min ||   
               transformedInput > max) {  

               var returnValue;  

               if (transformedInput < min || transformedInput > max) {  
                   returnValue = transformedInput.substring(0,transformedInput.length-1);  
               }  
               else {  
                   returnValue=transformedInput;  
               }  

               modelCtrl.$setViewValue(returnValue);  
               modelCtrl.$render();  
           }           

           return returnValue;           
       });  
     }  
   };  
});  

I am happy with the parsing, but the min/max and precision values are hard-coded in. Should I leave this as a directive and pass variables? Or would a function be more appropriate?

share|improve this question
 
Which browsers do you need to support? –  Mike Robinson Oct 1 '13 at 18:48
 
In current browsers you can specify input type=number. No directive needed. –  Jason Oct 1 '13 at 18:49
 
We're going to support Chrome, Firefox, and Internet Explorer 8+. I tried to use 'input type = number', but the text field still allowed me to enter text. –  C1pher Oct 1 '13 at 18:55
add comment

2 Answers

up vote 1 down vote accepted

I'd keep it as is and add custom attributes to pass in the min and max values:

<div ng-controller="Numeric">
    <br />
    <input type="text" ng-model="number" required="required" class="numbers-only" minvalue="-27" maxvalue="45" />
</div>

And in your directive (of course you should have some sanity checks and sensible defaults):

var min = parseInt(attrs.minvalue);
var max = parseInt(attrs.maxvalue);

I've forked your fiddle and made the changes here: http://jsfiddle.net/XaqSs/

share|improve this answer
 
Added to project and working perfectly. Thanks! –  C1pher Oct 1 '13 at 19:43
add comment

One potential option is to sidestep a custom directive completely and use the input type=number attribute.

<input type="number" min="5" max="18" step="0.5" value="9" name="shoe-size">

More on it here: http://html5doctor.com/html5-forms-input-types/

It's not supported by all browsers though, and firefox especially is lagging in support: http://caniuse.com/#search=number

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.