AngularJS a directive for input type = number that watches for changes

Question

the context: I am developing a mobile version of my app. I want a user to be able to enter numeric fields with their numeric keybord of their phone/tablet. AngularJS makes input fields with type = "number" unreachable for any non-integer data (which is any, because input is a string).

the idea: I want to make a directive that will somehow (using $watch or $parsers or any other ancient sorcery) convert input string to number.

the issue: My directive does not trigger changes of $watch when I type anything in the input field. But when I change scope field from my cotroller $watch is triggered as planed.

controller:

        // code minimized and omitted for clarity
        .controller('carController', ['$scope', function ($scope) {
            $scope.car = {
                power : null,
                // other fields
            }
        }]);

directive

angular.module('numeric', []).directive('numeric', function () {
    return {
        restrict: 'A',
        require: 'ngModel',

        scope: {
            model: '=ngModel'
        },
        link: function (scope, element, attrs, ngModelCtrl) {
            // parsers does not affect anything
            ngModelCtrl.$parsers.push(function(value) {
                return parseInt(value);
            });

            // watcher does not watch
            scope.$watch('model', function(newVal, old) {
                if (typeof newVal == 'string') {
                    scope.car.power = parseInt(newVal);
                }
            }, true);

        }
    };
});

html

    <div ng-controller="carController">
     <input   
            ng-model="car.power"                      
            numeric
            name="power"
            type="number"
            pattern="[0-9]">
       </div>

Here is a fiddle that demonstrates such behavior http://jsfiddle.net/xo94sw7m/1/

the question: what am I missing and how to make directive work as planned?

What I have tried: using $formatters-$parsers,using different approaches to $watch (using scope:false, isolated scope, trying to watch scope changes using attrs and etc), nothing seems to work so far

I don't see the problem, <input type="number"> fully supports floats — Ron Dadon
– Ron Dadon, Commented Mar 20, 2017 at 12:43
If you read the question or visit fiddle link you probably will see the problem. — Zanshin13
– Zanshin13, Commented Mar 20, 2017 at 12:45
I read the question and visited the fiddle, but why are you storing float as string? Just store it as float. — Ron Dadon
– Ron Dadon, Commented Mar 20, 2017 at 13:29
I am not storing float as string :) the only float in my question is parseFloat() and that is just bad copy-paste, I replaced in with parseInt(). But it does not make any difference - type=number will block .... wait. It seems that u were right, i have just deleted my directive and input is accepted jsfiddle.net/aqkobhux I don't understand what originally was wrong then... — Zanshin13
– Zanshin13, Commented Mar 20, 2017 at 13:44
@RonDadon it appears that problem was in pattern="[0-9]" attribute... Thank you for your help! — Zanshin13
– Zanshin13, Commented Mar 20, 2017 at 13:51

Gangadhar Jannu · Accepted Answer · 2017-03-20 14:14:25Z

1

myApp.directive('number', ['$parse', function($parse) {
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, ngModelController) {

            ngModelController.$parsers.push(function(data) {
                return parseInt(data);
            });
            ngModelController.$formatters.push(function(data) {
                if (data) {
                    var model = $parse(attrs['ngModel']);
                    model.assign(scope, parseInt(data));
                }
                return parseInt(data);

            });
        }
    }
}]);

Here is working fiddle

edited Mar 20, 2017 at 14:14

Gangadhar Jannu

4,4626 gold badges33 silver badges55 bronze badges

answered Mar 20, 2017 at 12:48

jitender

10.4k1 gold badge22 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Zanshin13 Over a year ago

Could you, please, provide some explanation for $formatters part ?

jitender Over a year ago

Formatters are invoked when the model is modified in the code.You can check this link stackoverflow.com/a/22843592/5621827 for more info.Also please marked this as accepted ans if it works for you.

Collectives™ on Stack Overflow

AngularJS a directive for input type = number that watches for changes

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related