错误：[ngModel:numfmt] 预期 `1` 是一个数字答案

【问题标题】：Error: [ngModel:numfmt] Expected `1` to be a number angularjs错误：[ngModel:numfmt] 预期 `1` 是一个数字
【发布时间】：2016-06-23 14:31:55
【问题描述】：

我是 Angular.js 的初学者。

我正在尝试通过从mongodb 获取数据来在angular.js 应用程序上生成动态表单。我已经通过 excel 表将导入的数据存储在 mongodb 上，这就是为什么所有 JSON 值都以 String 格式存储的原因。

为了解决这个问题，我通过检查 JSON 对象的值来动态生成表单。

例如：如果值包含数字（“123456”）那么我将显示input type="number"，如果值包含电子邮件然后input type="email"，值包含dob 然后datepicker 等等..

以下是我的模板代码：

<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>

这是我的控制器：

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

每当isNumeric 函数被调用时，它会在控制台上显示以下错误：

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

我调用电子邮件检查函数checkEmail 的方法相同，它工作得很好，那么isNumeric 函数有什么问题。

【问题讨论】：

您需要先将值解析为 Int/Float，然后再分配为数字大小写
我试过了，但它不起作用
检查errors.angularjs.org/1.4.8/ngModel/numfmt?p0=1234567890。他们给出了解决问题的例子
在这种情况下，他们正在验证数字，但在这里我想检查字符串是否包含数字或字符，并基于此我想填充 input type
只需尝试使用他们在示例中给出的指令或创建 plunkr 。希望它对你有用

标签： javascript angularjs json mongodb mean-stack

【解决方案1】：

你的模型

providerList[key]

应该包含1作为数字，但它必须是“1”，这是字符串，所以这个错误来了。

将模型值更改为数字。

【讨论】：

【解决方案2】：

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

然后，在相应的输入上使用“字符串到数字”。

参考：https://docs.angularjs.org/error/ngModel/numfmt

【讨论】：

这应该是公认的答案。仅供参考：您不需要第一个 .run()。

【解决方案3】：

问题在于表单输入 type='number' 并且 JSON 字符串已传递给模型。

在分配给模型或打开表单之前，您需要解析控制器中的所有数字（一旦收到来自 $http 调用的响应）

【讨论】：