Angular tells me floats are not numbers

Question

Angular highlights the text box with red if a non-integer number is used.

(function()
 {
     var app = angular.module('example', []);

     app.controller('InputController', function()
      {
   this.number = '';
      }
     );
 })();

<html ng-app="example">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form ng-controller="InputController as ctl" ng-submit="inputForm.$valid">
  <input type="number" step="0.001" pattern="(-|\+)?\d*\.?\d+" ng-model="ctl.number">
  <input type="submit">
</form>
</html>

If I set the step to, for example, 0.001, then it will highlight red when I put anything with more than three decimal places, e.g. 9.1234.

If I put the pattern (-|\+)?\d*\.?\d+, that changes nothing.

Combining step with pattern does not fix my problem.

How can I get it to accept anything that's a number, not just integers, and only numbers?

Possible duplicate of [How to handle floats and decimal separators with html5 input type number](http://stackoverflow.com/questions/15303940/how-to-handle-floats-and-decimal-separators-with-html5-input-type-number) — Marcos Pérez Gude, May 25 '16 at 15:40
@MarcosPérezGude The related question says `number` allows decimals. So I suspect this is an angular problem. — Barmar, May 25 '16 at 15:42
None of the answers on the dupe answer my question. Thanks for trying, though. — Matt Ellen, May 25 '16 at 16:13

score 1 · Answer 1 · edited May 23 '17 at 12:22

1

You have two options available either set the step size, this will up to n decimal places to be valid.

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

or do as Tushar suggested and validate it yourself with ng-pattern

edited May 23 '17 at 12:22

Community

1
1

answered May 25 '16 at 15:45

Ant Kennedy

1,230
7
13

Thanks for taking the time to answer. Adding a step doesn't allow any number, for example, your step doesn't allow 0.0001. ng-pattern (or pattern) doesn't stop the input box from turning red. – Matt Ellen May 25 '16 at 16:08
for a quick fix you can just make the step size really tiny `step="0.00000000000000001"` but that isn't the correct answer long term – Ant Kennedy May 25 '16 at 16:13

Angular tells me floats are not numbers

1 Answers1