Error: [ngModel:numfmt] Expected `1` to be a number angularjs
Solution 1
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);
});
}
};
});
And then, use 'string-to-number' on respective input.
Reference: https://docs.angularjs.org/error/ngModel/numfmt
Solution 2
Issue is with form input type='number' and JSON string is passed to the model.
You need to parse all numbers in controller (as soons as response is received from $http call) before assigning to the model or before opening the form
Related videos on Youtube
Comments
-
J.K.A. almost 2 years
I'm beginner in Angular.js.
I'm trying to generate a dynamic form on
angular.js
app by fetching data frommongodb
. I've stored imported data on mongodb through excel sheet so that's why all theJSON
values are getting stored inString
format.To tackle that issue I'm generating form dynamically by checking value of JSON object.
Ex: If value contains number ("123456") then I'll display
input type="number"
, if value contains email theninput type="email"
, value contains dob thendatepicker
and so on..Following is my template code:
<div class="form-group" ng-repeat="(key,value) in providerList" ng-if="!$first"> <label>{{key.replace("_", " ") | uppercase}}</label> <div ng-if="providerList[key].length > 100"> <textarea class="form-control" ng-model="providerList[key]"></textarea> </div> <div ng-if="providerList[key].length < 100 && !isNumeric(providerList[key]) && !checkEmail(providerList[key])"> <input type="text" class="form-control" id='datepicker' ng-model="providerList[key]"> </div> <div ng-if="isNumeric(providerList[key])"> <input type="number" class="form-control" ng-model="providerList[key]"> </div> <div ng-if="checkEmail(providerList[key])"> <input type="email" class="form-control" ng-model="providerList[key]"> </div> </div>
Here's my controller:
$scope.isNumeric = function (data) { if (isNaN(data)) { return false; } else { return true; } // if (/^\d+$/.test(data)) { // return true; // } else { // return false; // } }; $scope.checkEmail = function (email) { var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; return re.test(email); };
Here whenever
isNumeric
function getting called its showing following error on console:Error: [ngModel:numfmt] Expected `1` to be a number http://errors.angularjs.org/1.4.8/ngModel/numfmt?p0=1 minErr/<@http://localhost:1000/js/vendor/angular/angular.js:68:12 numberInputType/<@http://localhost:1000/js/vendor/angular/angular.js:21977:1 ngModelWatch@http://localhost:1000/js/vendor/angular/angular.js:25489:21 $RootScopeProvider/this.$get</Scope.prototype.$digest@http://localhost:1000/js/vendor/angular/angular.js:15888:34 $RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost:1000/js/vendor/angular/angular.js:16160:13 done@http://localhost:1000/js/vendor/angular/angular.js:10589:36 completeRequest@http://localhost:1000/js/vendor/angular/angular.js:10787:7 requestLoaded@http://localhost:1000/js/vendor/angular/angular.js:10728:1 return logFn.apply(console, args); angular.js (line 12520) Error: [ngModel:numfmt] Expected `1234567890` to be a number http://errors.angularjs.org/1.4.8/ngModel/numfmt?p0=1234567890 minErr/<@http://localhost:1000/js/vendor/angular/angular.js:68:12 numberInputType/<@http://localhost:1000/js/vendor/angular/angular.js:21977:1 ngModelWatch@http://localhost:1000/js/vendor/angular/angular.js:25489:21 $RootScopeProvider/this.$get</Scope.prototype.$digest@http://localhost:1000/js/vendor/angular/angular.js:15888:34 $RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost:1000/js/vendor/angular/angular.js:16160:13 done@http://localhost:1000/js/vendor/angular/angular.js:10589:36 completeRequest@http://localhost:1000/js/vendor/angular/angular.js:10787:7
Same way I'm calling function for email checking
checkEmail
and its working perfectly fine so what's the issue withisNumeric
function. -
Noel Baron over 6 yearsThis should be the accepted answer. FYI: You don't need the first .run().