Angularjs currency format in input box with ng-model: how to get $formatters to fire on each input

Question

I have searched everywhere for this. Every stack overflow that has an answer, it does not actually work. Same with any examples or google group examples from for angular including the docs.

Seems simple. I want a function to get called on an input for each key pressed by the user.

simple input with a ng-model

<input class="form-control" ng-model="model.thisisnotfun" formatter type="text" required>

According to everything i read. $formatters should update the value from the model to the view calling any functions in the $formatters array. They never get called when i type in the input box.

.directive('formatter', function ($filter, $parse) {
    return {
        require: 'ngModel',

        link: function (scope, element, attrs, ngModel) {

            ngModel.$formatters.push(
                function (value) {
                    console.log('this only gets called on page load');
                }
            );
        }
    };
})

I know there are plenty of custom ways to do this, which i have already done. I do not need a work around, i just want to know how to use $formatters correctly to "format" the view data.

very very simple jsfiddle http://jsfiddle.net/fh7sB/4/

Thanks for any help.

I dont see $formatter in AngularJS documentation. Could you help me with it? — Abilash
– Abilash, Commented Sep 22, 2013 at 6:11
sure ill post one. The docs are for the ngModelController docs-angularjs-org-dev.appspot.com/api/… — j_walker_dev
– j_walker_dev, Commented Sep 22, 2013 at 6:44
i added the fiddle, you can check the console logs. Really my question is why does the $parsers function get called when the $formatters does not on each keypress. — j_walker_dev
– j_walker_dev, Commented Sep 22, 2013 at 6:53

Dave Boster · Accepted Answer · 2014-12-23 06:15:18Z

I could not get the $formatters function to work like i wanted. I also could not find a single example of what i was looking for anywhere so i am going to post my answer in case someone needs it.

This is a directive for formatting us currency in input boxes with ng-model

    .directive('uiCurrency', function ($filter, $parse) {
    return {
        require: 'ngModel',
        restrict: 'A',
        link: function (scope, element, attrs, ngModel) {

            function parse(viewValue, noRender) {
                if (!viewValue)
                    return viewValue;

                // strips all non digits leaving periods.
                var clean = viewValue.toString().replace(/[^0-9.]+/g, '').replace(/\.{2,}/, '.');

                // case for users entering multiple periods throughout the number
                var dotSplit = clean.split('.');
                if (dotSplit.length > 2) {
                    clean = dotSplit[0] + '.' + dotSplit[1].slice(0, 2);
                } else if (dotSplit.length == 2) {
                    clean = dotSplit[0] + '.' + dotSplit[1].slice(0, 2);
                }

                if (!noRender)
                    ngModel.$render();
                return clean;
            }

            ngModel.$parsers.unshift(parse);

            ngModel.$render = function() {
                console.log('viewValue', ngModel.$viewValue);
                console.log('modelValue', ngModel.$modelValue);
                var clean = parse(ngModel.$viewValue, true);
                if (!clean)
                    return;

                var currencyValue,
                    dotSplit = clean.split('.');

                // todo: refactor, this is ugly
                if (clean[clean.length-1] === '.') {
                     currencyValue = '$' + $filter('number')(parseFloat(clean)) + '.';

                } else if (clean.indexOf('.') != -1 && dotSplit[dotSplit.length - 1].length == 1) {
                    currencyValue = '$' + $filter('number')(parseFloat(clean), 1);
                } else if (clean.indexOf('.') != -1 && dotSplit[dotSplit.length - 1].length == 1) {
                    currencyValue = '$' + $filter('number')(parseFloat(clean), 2);
                } else {
                     currencyValue = '$' + $filter('number')(parseFloat(clean));
                }

                element.val(currencyValue);
            };

        }
    };
})

Nikos Paraskevopoulos · Accepted Answer · 2013-09-22 10:42:40Z

9

The $formatters get called when the model is updated in order to format the value to be presented to the user. The $parsers do the opposite, i.e. translate the value from a view string to a real model, e.g. a number.

In the forked fiddle here: http://jsfiddle.net/9tuCz/ press the button; it changes the model and fires the $formatters again.

answered Sep 22, 2013 at 10:42

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

3 Comments

j_walker_dev Over a year ago

Thank you, i had figured that out during all of the testing and since have been figuring out how to make the $formatters fire from within the directive by setting the $modelValue like the button does. Do you know how to make that happen, that is my goal.

j_walker_dev Over a year ago

Plus during my testing the button will only fire the $formatter if the input is not already the same.

j_walker_dev Over a year ago

You did answer why $formatters was not getting called, which is correct. Even though it didn't help my problem, it did answer that so ill mark it. If someone needs a directive they can look at my answer.

Jussi Kosunen · Accepted Answer · 2013-09-22 07:29:57Z

0

Make sure you're actually returning a valid value from your functions.

What's likely happening is since the parser returns the same value each time, the formatter assumes the formatted output will not have changed either so it skips the call.

edited Sep 22, 2013 at 7:29

answered Sep 22, 2013 at 7:22

Jussi Kosunen

8,2973 gold badges30 silver badges34 bronze badges

2 Comments

j_walker_dev Over a year ago

I like the idea. Can you update my fiddle to prove it? I would accept this answer in a heartbeat since i have been banging my head for hours.

j_walker_dev Over a year ago

I am not exactly sure what you are saying. Here is an updated fiddle, is this what you mean, or can you fix it to work? jsfiddle.net/bDZf3/3

Collectives™ on Stack Overflow

Angularjs currency format in input box with ng-model: how to get $formatters to fire on each input

3 Answers 3

1 Comment

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related