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
14 views



Related Hot Questions

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
Anti-spam verification:
To avoid this verification in future, please log in or register.

...