AngularJS中input[type=number]绑定字符串值报错的解决方法

遇到这种数字输入框的绑定坑太正常了！我来给你拆解下问题根源，再给几个实用的解决方案：

为什么会报错？ #

• [ngModel:numfmt]：AngularJS对type="number"的输入框有严格校验，要求ng-model绑定的值必须是数字类型，如果是字符串（哪怕是"24"这种数字字符串），就会触发格式错误。
• [ngModel:nonassign]：你应该尝试过直接在绑定里做类型转换（比如ng-model="Number(myValue)"），但这种表达式是只读的，AngularJS没法把用户输入的值写回模型，所以抛出不可赋值的错误。

解决方案1：自定义全局转换指令（推荐，复用性高） #

写一个指令自动处理字符串和数字的双向转换，同时跳过Angular的默认数字格式校验：

angular.module('yourAppName').directive('stringToNumber', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      // 从视图到模型：把用户输入的字符串转成数字
      ngModel.$parsers.push(function(viewValue) {
        // 用parseInt/parseFloat根据需求选，这里用parseInt处理整数
        return parseInt(viewValue, 10) || 0;
      });

      // 从模型到视图：把字符串数字转成数字，避免视图渲染错误
      ngModel.$formatters.push(function(modelValue) {
        return typeof modelValue === 'string' ? parseInt(modelValue, 10) : modelValue;
      });

      // 覆盖默认的数字校验，只要能转成有效数字就通过
      ngModel.$validators.number = function(modelValue) {
        return !isNaN(parseInt(modelValue, 10));
      };
    }
  };
});

然后在HTML里直接用：

<input type="number" ng-model="yourBoundValue" string-to-number>

解决方案2：使用getterSetter处理单个绑定（灵活） #

如果只是个别控件需要处理，可以用Angular的ng-model-options配合getter/setter函数，手动控制值的转换：

在控制器里定义getter/setter：

// 用一个私有变量存原始值
$scope._yourValue = "24";

// 定义getter/setter函数
$scope.yourValueHandler = function(newVal) {
  if (angular.isDefined(newVal)) {
    // 设置值时转成数字
    $scope._yourValue = parseInt(newVal, 10) || 0;
  }
  // 获取值时，把字符串转成数字返回
  return typeof $scope._yourValue === 'string' ? parseInt($scope._yourValue, 10) : $scope._yourValue;
};

HTML里这样绑定：

<input type="number" 
       ng-model="yourValueHandler" 
       ng-model-options="{ getterSetter: true }">

解决方案3：初始化时提前转换（简单直接） #

如果你的数据是从后端获取的，能在控制器里提前处理的话，直接把字符串转成数字再绑定是最省事的：

// 假设从后端拿到的是字符串数字
var rawData = "24";
$scope.yourBoundValue = parseInt(rawData, 10);

这样绑定后就不会触发任何错误了，缺点是没法处理后续动态变成字符串的情况。

内容的提问来源于stack exchange，提问作者Red