ng-model for input type 'number' not working angularjs

I just ran into this same issue and managed to solve it. In my case, the model is being obtained via a RESTful $resource and the value for the amount is being provided as a string to the field, which in turn wipes out the value. In order to address this, I ended up doing the following in my controller:

$scope.cart = Cart.get(id: $routeParams.id, function(cart){
    cart.quantity = parseFloat(cart.quantity, 10);
});

which turns the value into a float, prior to updating the view. One gotcha I ran into is that my first attempt was setting $scope.cart.quantity = parseFloat($scope.cart.quantity, 10) immediately after the get. This was not working since the value was overwritten when the async call to get completed.

$scope.cart = Cart.get(id: $routeParams.id);
$scope.cart.quantity = parseFloat($scope.cart.quantity, 10); // This won't work

Hope this helps.

Your binded value is a string not a number.

First of all, check that your server is sending a number. If you are using PHP, you might want to use:

json_encode($array, JSON_NUMERIC_CHECK);

You might also turn your string into int or float with Javascript on the client side:

var data = ['1.9', '3']; //these won't be binded to the numbers-only input
data[0] = parseFloat(data[0]); //this will
data[1] = parseInt(data[1]);

It's not a bug as that the numbers input only accepts valid numbers (hopefully).

Note:

I also tried to bind an ng-value with an integer filter but it wont't work. Maybe because the ng-model is the one that's binded when both are found (yup, they have the same priority level).

I solve this problem using a custom directive:

angular.module('directives').directive('input', function() {
  return {
    restrict: 'E',
    require: 'ngModel',
    link: function(scope, $el, attrs, ngModel) {
      if ($el.get(0).type === 'number') {
        ngModel.$parsers.push(function(value) {
          return value.toString();
        });

        ngModel.$formatters.push(function(value) {
          return parseFloat(value, 10);
        });
      }
    }
  }
})

This way you do not need to change any HTTP response when the data is being obtained via a restfull resource.

Restrict this directive if necessary :)

value is overridden by ng-model. Remove your value property, and your ng-model will fill the input with the cart quantity.

I had the same problem (with an input type="range" actually) and here is my solution, using a custom directive:

app.directive('ngFloat', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, $el, attrs, ngModel) {
        ngModel.$parsers.push(function(value) {
            return parseFloat(value, 10);
        });

        ngModel.$formatters.push(function(value) {
            return value.toString();
        });
    }
  };
});

As I restricted the directive to the "ngFloat" attribute, it is need to tag the input like this:

<input ng-float type=.........

I hope this can help future visitors.

I added a name attribute to the input and it started working

If cart.quantity data type is not Number, it won't work.

Your need to

$scope.cart.quantity = parseFloat($scope.cart.quantity);

Your ng-model in this case cart.quantity has to be a number and not a string.

I found this link, which helped me. It creates a string-to-number directive, which you can attach to the number inputs in a similar fashion, that Ruy Diaz showed: https://docs.angularjs.org/error/ngModel/numfmt

I also ran into the same problem and tried to find a solution all the was complex for a newbie then I came across a solution at the old version of angular at https://docs.angularjs.org/api/ng/input/input%5Bnumber%5D

according to which ng-model accepts a string the workaround is that we define a

min

and

max

value while using input type=" number"

It worked for me and I hope that it work for others too

Strange, in my case, removing min and max attributes from the input type="number" worked for me. I mean the ng-model worked!!

Seems completely opposite to what arpit kumar posted above.

AngularJS version: 1.6.1

angular
  .module('xxx')
  .directive('ngFloat', function () {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function (scope, $el, attrs, ngModel) {
        ngModel.$formatters.push(function (value) {
          return +value
        });
      }
    };
  });