AngularJS处理格式化数字输入

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

如何在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)字段上使用自定义指令,以始终将数据格式化为数字
您的指令将类似于

  1. angular.module('myApp').directive('myDirective', function() {
  2. return {
  3. require: 'ngModel',
  4. link: function(scope, element, attrs, ngModelController) {
  5. ngModelController.$parsers.push(function(data) {
  6. //convert data from view format to model format
  7. return data; //converted
  8. });
  9. ngModelController.$formatters.push(function(data) {
  10. //convert data from model format to view format
  11. return data; //converted
  12. });
  13. }
  14. }
  15. });

Source

展开查看全部
gwo2fgha

gwo2fgha2#

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

  1. app.directive('appType', function () {
  2. return {
  3. require: 'ngModel',
  4. link: function (scope, elem, attrs, ctrl) {
  5. // Custom number validation logic.
  6. if (attrs.appType === 'number') {
  7. return ctrl.$parsers.push(function (value) {
  8. var v = value.replace(/,/g,''),
  9. valid = v == null || isFinite(v);
  10. ctrl.$setValidity('number', valid);
  11. return valid && v != null ? Number(v) : undefined;
  12. });
  13. }
  14. }
  15. };
  16. });

这是由于我发现使用您的所有反馈的链接:http://blakeembrey.com/articles/angular-js-number-validation-bug/
更新的柱塞:http://plnkr.co/edit/rcTrGHb9asRu4tIKPou8?p=preview

展开查看全部

相关问题