Directive to allow decimal numbers with only 1 decimal point

Question

I have an angular application where an input field should allow only positive numbers with one decimal point. In my directive I am replacing anything other than 0-9 and '.'.But currently my application is accepting multiple decimal values. It should accept:

0.5 0.56

Not 0.5.5 or 0..5

PFB the code:

link: function (scope, element, attrs, modelCtrl) {
                modelCtrl.$parsers.push(function (inputValue) {
                    // this next if is necessary for when using ng-required on your input. 
                    // In such cases, when a letter is typed first, this parser will be called
                    // again, and the 2nd time, the value will be undefined
                    if (inputValue === undefined) {
                        return '';
                    }
                    var transformedInput = inputValue.replace(/[^0-9\.]/g, '');
                    if (transformedInput !== inputValue) {
                        modelCtrl.$setViewValue(transformedInput);
                        modelCtrl.$render();
                    }

                    return transformedInput;
                });
            }

This question might seem ignorant but I have tried all the solutions provided before this but changing my regular expression according to the same doesn't seem to work. It accepts right now multiple '.'.

Thanks in advance.

Answer 1

Here is fiddle http://jsfiddle.net/oora0t93/ check it:-

   app.directive('inputPrice', function () {
        return {
            restrict: 'EA',
            template: '<input name="{{inputName}}" ng-model="inputValue" />',
            scope: {
                inputValue: '=',
                inputName: '='
            },
            link: function (scope) {
                scope.$watch('inputValue', function(newValue,oldValue) {
                    if(String(newValue).indexOf(',') != -1)
                        scope.inputValue = String(newValue).replace(',', '.');
                    else {
                        var index_dot,
                            arr = String(newValue).split("");
                        if (arr.length === 0) return;
                        if (arr.length === 1 && (arr[0] == '-' || arr[0] === '.')) return;
                        if (arr.length === 2 && newValue === '-.') return;
                        if (isNaN(newValue) || ((index_dot = String(newValue).indexOf('.')) != -1 && String(newValue).length - index_dot > 3 )) {
                            scope.inputValue = oldValue;
                        }
                    }
                });
            }
        };
    });

Answer 2

I got it. I did not find a regular expression solution so did it using some javascript string manipulations. PFB the code:

            var firstIndexOfDecimal = transformedInput.indexOf('.');
            var lastIndexofDecimal = transformedInput.lastIndexOf(".");

            if(firstIndexOfDecimal !== lastIndexofDecimal){
                transformedInput = transformedInput.substr(0,lastIndexofDecimal) + transformedInput.substr(lastIndexofDecimal+1, transformedInput.length);
            }

Thanks for the help.