CODEWITHSUNDEEP
angularjs
Jebathon
Jebathon

Reputation: 4581

Angular Error: Model is not of type `number`

In my application I am getting the error:

Angular Error: ngModel:numfmt Model is not of type number

HTML:

<input ng-model="price" type="number" name="price" placeholder="enter price" id="price" />

In my controller I tried putting this to stop the issue. But I didn't have any luck.

$scope.$watch('price', function (val, old) {
    $scope.value = parseInt(val);
});

How can I catch or mitigate this issue?

If you need more details don't hesitate to ask

Upvotes: 3

Views: 6838

Answers (4)

Justis Matotoka
Justis Matotoka

Reputation: 829

this.variable = isNaN(defaultValue.value) ? defaultValue.value : parseInt(defaultValue.value);

Upvotes: 0

Deepak Panwar
Deepak Panwar

Reputation: 179

you can make a stringToNumber directive to parse string to number, the perfect example of this is shown at below link : https://docs.angularjs.org/error/ngModel/numfmt

Upvotes: 0

Vineet
Vineet

Reputation: 4645

You should use stringToNumber directive to resolve this error. The number input directive <input type="number"> requires the model to be a number. To store the number as a string you should use stringToNumber directive which convert it into the format the input[number] directive expects. Check below snippet. 

<input ng-model="price" string-to-number type="number" name="price" placeholder="enter price" id="price" />

And here's the directive (from here):

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

Upvotes: 12

Ivan
Ivan

Reputation: 4763

<input .... />

I have found angular to be fussy about the input it accepts. I found out the hard way, spending some time debugging something I wrote, which I passed through the notepad++ XML formatter to lay things out beautifully, in order to verify there were no mismatched tags.

The formatter replaced 

<script .....></script>

with a self closing tag

<script ...../>

and the XML style self closing tags that the formatter created in my HTML prevented angular from being able interpret my file correctly.

Certain tags like <BR>, <meta> and (I think) <input> don't need closing. I don't know if this is your problem, but I would certainly edit the file to remove your self closing input tag before investigating any further.

Upvotes: 0

Related Questions