1
+ @ngdoc error
2
+ @name ngModel:numfmt
3
+ @fullName Model is not of type `number`
4
+ @description
5
+
6
+ The number input directive `<input type="number">` requires the model to be a `number`.
7
+
8
+ If the model is something else, this error will be thrown.
9
+
10
+ Angular does not set validation errors on the `<input>` in this case
11
+ as this error is caused by incorrect application logic and not by bad input from the user.
12
+
13
+ If your model does not contain actual numbers then it is up to the application developer
14
+ to use a directive that will do the conversion in the `ngModel` `$formatters` and `$parsers`
15
+ pipeline.
16
+
17
+ ## Example
18
+
19
+ In this example, our model stores the number as a string, so we provide the `stringToNumber`
20
+ directive to convert it into the format the `input[number]` directive expects.
21
+
22
+
23
+ <example module="numfmt-error-module">
24
+ <file name="index.html">
25
+ <table>
26
+ <tr ng-repeat="x in ['0', '1']">
27
+ <td>
28
+ <input type="number" string-to-number ng-model="x" /> {{ x }} : {{ typeOf(x) }}
29
+ </td>
30
+ </tr>
31
+ </table>
32
+ </file>
33
+ <file name="app.js">
34
+ angular.module('numfmt-error-module', [])
35
+
36
+ .run(function($rootScope) {
37
+ $rootScope.typeOf = function(value) {
38
+ return typeof value;
39
+ };
40
+ })
41
+
42
+ .directive('stringToNumber', function() {
43
+ return {
44
+ require: 'ngModel',
45
+ link: function(scope, element, attrs, ngModel) {
46
+ ngModel.$parsers.push(function(value) {
47
+ return '' + value;
48
+ });
49
+ ngModel.$formatters.push(function(value) {
50
+ return parseFloat(value, 10);
51
+ });
52
+ }
53
+ };
54
+ });
55
+ </file>
56
+ </example>
0 commit comments