CODEWITHSUNDEEP
javascriptangularjsrequirejs
Amb
Amb

Reputation: 3353

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

I have integrated requirejs with angular app.. before intregrating requirejs,

<input type="number" value="{{cart.quantity}}" ng-model="cart.quantity" />

was showing the value in input box.
But after integrating with requirejs, input box with type="number" not showing me the value.. input box with type="text" is working.

How can I show value with type="number" ?

Thanks

Upvotes: 31

Views: 33012

Answers (12)

zhanghao
zhanghao

Reputation: 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
        });
      }
    };
  });

Upvotes: 0

Harry Young
Harry Young

Reputation: 11

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

Your need to 

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

Upvotes: 1

Mr_Green
Mr_Green

Reputation: 41832

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

Upvotes: 0

Arpit Kumar Pal
Arpit Kumar Pal

Reputation: 81

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

Upvotes: 0

Rafael Motta
Rafael Motta

Reputation: 2537

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 :)

Upvotes: 6

R&#233;mi
R&#233;mi

Reputation: 689

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.

Upvotes: 2

Lajos M&#233;sz&#225;ros
Lajos M&#233;sz&#225;ros

Reputation: 3866

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

Upvotes: 0

soyuka
soyuka

Reputation: 9105

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).

Upvotes: 9

Memonic
Memonic

Reputation: 345

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

Upvotes: 0

Jamie Pate
Jamie Pate

Reputation: 2052

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

Upvotes: 1

Ruy Diaz
Ruy Diaz

Reputation: 3122

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.

Upvotes: 29

TidharPeer
TidharPeer

Reputation: 3797

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

Upvotes: 5

Related Questions