Organizational Research By

Surprising Reserch Topic

angular input currency directive


angular input currency directive  using -'angularjs,angularjs-directive'

I'm trying to create a custom input directive for currency values, with two buttons on its side to increment and decrement value.

Right now it's working, but when the user inputs some text the number is not formatted. What am I doing wrong?

Working fiddle:
https://jsfiddle.net/x8L74g75/3/

And this is the custom directive:

app.directive('inputMoney', ['$locale', '$filter', function ($locale, $filter) {
    var numberFilter = $filter('number');

    return {
        restrict: 'E',
        scope: {
            ngModel: '=',
            ngDisabled: '=?',
            min: '=?',
            max: '=?'
        },
        require: 'ngModel',
¬†¬†¬†¬†¬†¬†¬†¬†template: '<button type="button" class="increment" ng-click="increment(-10)" ng-disabled="ngDisabled">‚Äď</button>' +
            '<input type="tel" ng-model="ngModelCtrl.$viewValue" ng-disabled="ngDisabled" min="min" max="max" autofocus required autocomplete="off">' +
            '<button type="button" class="increment" ng-click="increment(10)" ng-disabled="ngDisabled">+</button>',
        link: function ($scope, $element, $attr, ngModel) {
            var $input = $element.find('input');
            $scope.ngModelCtrl = ngModel;

            ngModel.$parsers.push(function inputMoneyParser(value) {
                var rawNumber = value + '';

                while (rawNumber.indexOf($locale.NUMBER_FORMATS.GROUP_SEP) >= 0) {
                    rawNumber = rawNumber.replace($locale.NUMBER_FORMATS.GROUP_SEP, '');
                }

                return parseInt(rawNumber);
            });
            $scope.$watch('ngModelCtrl.$viewValue', ngModel.$setViewValue);

            //Group separator
            ngModel.$formatters.push(function inputMoneyFormatter(value) {
                return numberFilter(value);
            });

            //Validators
            ngModel.$validators.value = function (modelValue, viewValue) {
                return !isNaN(modelValue) && isFinite(modelValue);
            };
            ngModel.$validators.min = function (modelValue, viewValue) {
                return angular.isUndefined($scope.min) ? true : modelValue >= $scope.min;
            };
            ngModel.$validators.max = function (modelValue, viewValue) {
                return angular.isUndefined($scope.max) ? true : modelValue <= $scope.max;
            };
            $scope.$watch('ngModelCtrl.$valid', function (isValid) {
                $input.toggleClass('ng-invalid ng-dirty', !isValid);
            });

            //Only allow numbers and group separator input
            $input.on('keypress', function inputMoneyKeyPress(e) {
                var charCode = angular.isUndefined(e.which) ? e.keyCode : e.which;
                var charStr = String.fromCharCode(charCode);

                if (charStr && charStr != $locale.NUMBER_FORMATS.GROUP_SEP && /[^\d]/gi.test(charStr)) { //Disable alpha input
                    e.preventDefault();
                }
            });

            //Increment buttons
            $scope.increment = function incrementMoney(increment) {
                if (!$scope.ngDisabled) {
                    $scope.ngModel = ($scope.ngModel || 0) + increment;
                }
            };
        }
    };
}]);

    
asked Oct 11, 2015 by yashwantpinge
0 votes
9 views



Related Hot Questions



Government Jobs Opening


...