ng-model throwing error on input type number in angular 1.3

Question

I have an input field which I want he user to input a number, so I have made an input field with type="number".

When I use it in 1.2 I get no errors

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script>
<script>
    var app = angular.module('app', []);
    app.controller('MainCtrl', ['$scope', function ($scope) {
        $scope.person = [
            {"name": "Alex","pts": "10"}
        ];
    }]);
</script>
<div ng-app="app">
    <div ng-controller="MainCtrl">
        {{person | json }}<br>
        name: <span ng-bind="person[0].name"></span></br>
        <!-- pts: <input ng-model="person[0].pts"> -->
        pts: <input type="number" ng-model="person[0].pts"><br?
    </div>
</div>

http://codepen.io/anon/pen/dPKgVL

However when I use it in 1.3 I get Error: [ngModel:numfmt] but when i update the number it still seems to get bound to the scope.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
    var app = angular.module('app', []);
    app.controller('MainCtrl', ['$scope', function ($scope) {
        $scope.person = [
            {"name": "Alex","pts": "10"}
        ];
    }]);
</script>
<div ng-app="app">
    <div ng-controller="MainCtrl">
        {{person | json }}<br>
        name: <span ng-bind="person[0].name">
        name: <span ng-bind="person[0].name"></span></br>
        <!-- pts: <input ng-model="person[0].pts"> -->
        pts: <input type="number" ng-model="person[0].pts">
    </div>
</div>

http://codepen.io/anon/pen/YPvJro

Am I doing something wrong here or is this nothing to worry about? I would prefer not to have the errors in my console, when I am trying to debug other issues

The short answer is that it expects the number 10, but your model gives it the string "10". In the future, use non-minified Angular (remove .min) to see more elaborate error messages — New Dev
– New Dev, Commented Mar 1, 2015 at 2:24
Possible duplicate of How to convert string to number or date in angularjs expression — Prashant Pokhriyal
– Prashant Pokhriyal, Commented Oct 27, 2019 at 18:13

KyleM · Accepted Answer · 2016-03-28 00:28:05Z

19

Add this to fix the issue:

myApp.directive('input', [function() {
    return {
        restrict: 'E',
        require: '?ngModel',
        link: function(scope, element, attrs, ngModel) {
            if (
                   'undefined' !== typeof attrs.type
                && 'number' === attrs.type
                && ngModel
            ) {
                ngModel.$formatters.push(function(modelValue) {
                    return Number(modelValue);
                });

                ngModel.$parsers.push(function(viewValue) {
                    return Number(viewValue);
                });
            }
        }
    }
}]);

answered Mar 28, 2016 at 0:28

KyleM

6286 silver badges17 bronze badges

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

1 Comment

keithl8041 Over a year ago

This is handy if you don't have complete control over your JSON model (for example, mine also had to support strings in that property so changing it to an integer type wouldn't work for me).

net.uk.sweet · Accepted Answer · 2015-03-01 02:26:01Z

11

Define the pts property as a number instead of a string:

var app = angular.module('app', []);
app.controller('MainCtrl', ['$scope', function ($scope) {
    $scope.person = [
        {"name": "Alex","pts": 10}
    ];
}]);

answered Mar 1, 2015 at 2:26

net.uk.sweet

12.4k3 gold badges26 silver badges42 bronze badges

Comments

chrmcpn · Accepted Answer · 2015-12-23 21:10:37Z

8

This directive will parse the string value for any input of type 'number'. Then you will get no errors:

module.directive('input', function(){
    return {
        require: 'ngModel',
        link: function(scope, elem, attrs, ngModel){
            if(attrs.type == 'number'){
                ngModel.$formatters.push(function(value){
                    return parseFloat(value);
                });
            }
        }
    };
});

answered Dec 23, 2015 at 21:10

chrmcpn

6327 silver badges10 bronze badges

Comments

jlowcs · Accepted Answer · 2015-03-01 02:26:19Z

2

Remove the quotes around "10". Angular is expecting a number, and you're giving it a string.

answered Mar 1, 2015 at 2:26

jlowcs

1,9331 gold badge11 silver badges16 bronze badges

Comments

Sergio · Accepted Answer · 2016-03-01 03:18:11Z

2

Is Easy solution Error "AngularJS Documentation for numfmt" parse Type in Int Or Float ;-)

<input type="number" ng-model="inputNumDemo" />

....
    app.controller('Demo',[ '$scope', function($scope){

      // Input numeric convert String "10" to Int 10 or Float
      $scope.f.inputNumDemo = parseInt(d.data.inputDemo );

    }]);
....

answered Mar 1, 2016 at 3:18

Sergio

2,4991 gold badge18 silver badges22 bronze badges

Comments

Er Nilay Parekh · Accepted Answer · 2017-11-23 10:13:42Z

0

Hello Just add this code in app.js

angular.module('numfmt-error-module', [])

.run(function($rootScope) {
  $rootScope.typeOf = function(value) {
    return typeof value;
  };
})

.directive('stringToNumber', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      ngModel.$parsers.push(function(value) {
        return '' + value;
      });
      ngModel.$formatters.push(function(value) {
        return parseFloat(value);
      });
    }
  };
});

answered Nov 23, 2017 at 10:13

Er Nilay Parekh

5875 silver badges18 bronze badges

Collectives™ on Stack Overflow

ng-model throwing error on input type number in angular 1.3

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related