Error: ngModel:numfmt

Model is not of type `number`

The number input directive <input type="number"> requires the model to be a number.

If the model is something else, this error will be thrown.

Angular does not set validation errors on the <input> in this case as this error is caused by incorrect application logic and not by bad input from the user.

If your model does not contain actual numbers then it is up to the application developer to use a directive that will do the conversion in the ngModel $formatters and $parsers pipeline.

Example

In this example, our model stores the number as a string, so we provide the stringToNumber directive to convert it into the format the input[number] directive expects.

<table>
  <tr ng-repeat="x in ['0', '1']">
    <td>
      <input type="number" string-to-number ng-model="x" /> {{ x }} : {{ typeOf(x) }}
    </td>
  </tr>
</table>

angular.module('numfmt-error-module', [])

.run(function($rootScope) {
  $rootScope.typeOf = function(value) {
    return typeof value;
  };
})

.directive('stringToNumber', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      ngModel.$parsers.push(function(value) {
        return '' + value;
      });
      ngModel.$formatters.push(function(value) {
        return parseFloat(value, 10);
      });
    }
  };
});