Search code examples
javascriptangularjsnumericgetter-setter

Angular 1.4.x numeric field with gettersetter not working for decimal numbers


I have a problem in chrome(47) where when using an input of type number in combination with ng-model-options="{ getterSetter: true }" does not allow you to enter decimal numbers in the field.

With getterSetter: (not working)

<input ng-model="amount" ng-model-options="{ getterSetter: true }" step="0.01" type="number" >

Without getterSetter: (works)

<input ng-model="_amount" step="0.01" type="number">

see plunker for a demo http://plnkr.co/edit/qu8UXCUtkJaFwjgGE1NX?p=preview


Solution

  • What is happening there is that when you declare a getterSetter function, this function is being called everytime you modify the input's value.

    So when you write "12." the function is being called, but that is not a valid number, so it takes out the "." for providing a valid value.

    Try typing "123" and then adding a "." between numbers such as "12.3" that works!

    Edit

    I have fixed your code, now it works.

    Try this:

     $scope.amount = function(newValue) {
      return arguments.length ? ($scope._amount = newValue) : $scope._amount;
    };
    

    Here is a forked plunkr: http://plnkr.co/edit/xZtZLH5He4ZnjkqhFApY?p=preview