角度句柄格式化数字输入

Question

如何在角度的数字字段中允许“1,200”之类的值？

我的用户对值进行了大量复制/粘贴，他们喜欢始终采用数字格式。问题是当这些格式化值之一被粘贴回时，角度input[type=number] 的默认设置将引发错误。

这是一个从this page: 分叉的 plunk

http://plnkr.co/edit/rcTrGHb9asRu4tIKPou8?p=preview

请注意，当您复制一个格式化的值（例如它以 1,200 开头）并将其粘贴回输入框中时，它会中断。

我怎样才能最好地处理这个问题？这似乎是以前会处理的事情，但我很难追踪任何事情。我不需要任何强大的东西。我可以修改输入文本以删除格式，并且可以采用标准的 en-us 格式。

Answer 1

您可以在常规输入（类型=文本）字段上使用自定义指令，以始终将数据格式化为数字

你的指令看起来像

angular.module('myApp').directive('myDirective', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModelController) {
      ngModelController.$parsers.push(function(data) {
        //convert data from view format to model format
        return data; //converted
      });

      ngModelController.$formatters.push(function(data) {
        //convert data from model format to view format
        return data; //converted
      });
    }
  }
});

Source

Answer 2

这是我采用的解决方案：

app.directive('appType', function () {
  return {
    require: 'ngModel',
    link: function (scope, elem, attrs, ctrl) {
      // Custom number validation logic.
      if (attrs.appType === 'number') {
        return ctrl.$parsers.push(function (value) {

          var v = value.replace(/,/g,''),
              valid = v == null || isFinite(v);

          ctrl.$setValidity('number', valid);

          return valid && v != null ? Number(v) : undefined;
        });
      }
    }
  };
});

感谢我使用您的所有反馈找到的链接：http://blakeembrey.com/articles/angular-js-number-validation-bug/

更新的插件：http://plnkr.co/edit/rcTrGHb9asRu4tIKPou8?p=preview