AngularJS处理格式化数字输入

oknwwptz  于 2022-11-28  发布在  Angular
关注(0)|答案(2)|浏览(159)

如何在Angular 的数字字段中允许“1,200”之类的值?
我的用户做了很多复制/粘贴值的工作,他们喜欢整个数字格式。问题是Angular input[type=number]的默认设置在这些格式化值之一被粘贴回时会抛出错误。
这是从this page:分叉的plunk
http://plnkr.co/edit/rcTrGHb9asRu4tIKPou8?p=preview
请注意,当您复制一个格式化的值(如开头的1,200)并将其粘贴回输入框时,它会断开。
我如何才能最好地处理这个问题?看起来这是以前应该处理过的问题,但是我很难找到任何东西。我不需要任何健壮的东西。我可以修改输入文本以删除格式,我可以假设一个标准的en-us格式。

eni9jsuy

eni9jsuy1#

您可以在常规输入(type=text)字段上使用自定义指令,以始终将数据格式化为数字
您的指令将类似于

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

gwo2fgha

gwo2fgha2#

下面是我采用的解决方案:

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

相关问题