ng-model throws error when input type number is string AngularJS

Question

When the value of the ng-model is "24" (string) instead of 24 (number), on an input[type="number"] it throws following error:

Error: [ngModel:numfmt] http://errors.angularjs.org/1.5.8/ngModel/numfmt?p0=24

I tried to set the input as follow:

<input class="form-control" type="number" name="HouseNumber"
       ng-model="Number(HouseNumber)" />

However, this throws also an error:

Error: [ngModel:nonassign] http://errors.angularjs.org/1.5.8/ngModel/nonassign

How can I let AngularJS ignore this error / strict binding, or convert this automaticly to a number in the ng-model?

I cannot set the input to type="text".

Just to visualize the error

angular.module("app", [])

.controller("controller", function ($scope) {
  // I cannot simply change this in the actual code to $scope.number = 24;
  $scope.number = "24";
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>

<div ng-app="app" ng-controller="controller">
  <input type="number" ng-model="number"/>
</div>

When changing the input type to type="text" it works
I can't do this however in the actual code, as the input should stay a number.

angular.module("app", [])

.controller("controller", function ($scope) {
  // I cannot simply change this in the actual code to $scope.number = 24;
  $scope.number = "24";
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>

<div ng-app="app" ng-controller="controller">
  <input type="text" ng-model="number"/>
</div>

try using ng-model="HouseNumber" ng-change="Number(HouseNumber)" and in your controller: $scope.Number = (x) => {return Number(x);} — Aleksey Solovey
– Aleksey Solovey, Commented Mar 8, 2018 at 15:41
Why don't you post your running code with error? That will probably help us to find the exact problem. — kapishreshth
– kapishreshth, Commented Mar 8, 2018 at 15:49
@AlekseySolovey No that is not possible, as Angular says not to use functions as a model. See this link: errors.angularjs.org/1.5.8/ngModel/nonassign — Red
– Red, Commented Mar 8, 2018 at 16:03

Aleksey Solovey · Accepted Answer · 2018-03-08 16:03:40Z

1

If you can't change the initialisation of a variable and cast a string, then change the input. (If the mountain will not come to Muhammad, then Muhammad must go to the mountain)

You would need to write a directive that overrides input functionalities. I have adopted this little feature, that you can change however you like for your app:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.x = "24";
});

app.directive('input', function() {
  return {
    restrict: 'E',
    require: 'ngModel',
    link: function(scope, $el, attrs, ngModel) {
      if ($el[0].type === "number") {
        ngModel.$parsers.push(function(value) {
          return Number(value);
        });
        ngModel.$formatters.push(function(value) {
          return parseFloat(value, 10);
        });
      }

    }
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
  <input type="number" ng-model="x">
</div>

answered Mar 8, 2018 at 16:03

Aleksey Solovey

4,1663 gold badges18 silver badges34 bronze badges

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

1 Comment

Red Over a year ago

Thanks, will use it.

John Baker · Accepted Answer · 2018-03-08 16:11:59Z

1

Not much experience on Angular, but wouldn't a simple parseInt be more than enough to do what you ask for?

angular.module("app", [])

.controller("controller", function ($scope) {
  // I cannot simply change this in the actual code to $scope.number = 24;
  $scope.number = parseInt("24", 10);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>

<div ng-app="app" ng-controller="controller">
  <input type="number" ng-model="number"/>
</div>

answered Mar 8, 2018 at 16:11

John Baker

2,41816 silver badges13 bronze badges

Comments

Steve -Cutter- Blades · Accepted Answer · 2018-03-08 16:03:27Z

0

input[type=number] requires a numeric value, and angular decorators for the field would type check it. You have to cast the value to a number to use the input[type=number] field.

answered Mar 8, 2018 at 16:03

Steve -Cutter- Blades

5,4623 gold badges30 silver badges46 bronze badges

Collectives™ on Stack Overflow

ng-model throws error when input type number is string AngularJS

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related