简体   繁体   English

Angular textarea指令:允许数字,不允许逗号,点

[英]Angular textarea directive: numbers allowed, no commas, dots allowed?

I have a textarea which holds multiple values stored in ng-model as an array. 我有一个textarea,它以数组形式存储在ng-model中存储的多个值。 On press of enter and insertion of a new valid character(numbers and dots) a new value is created within the array. 按下回车键并插入新的有效字符(数字和点)后,将在数组中创建一个新值。

在此处输入图片说明

I am trying to adapt a custom directive I found in an answer. 我正在尝试改编我在答案中找到的自定义指令。 But I still have the following issues: 但是我仍然有以下问题:

1- You can still type in consecutive dots as(34...5) which should not be allowed. 1-您仍然可以将连续的点键入为(34 ... 5),这是不允许的。
2- if same key is pressed twice it is accepted until a new key is pressed. 2-如果两次按下相同的键,则接受该操作直到按下新的键。 So if I press the character "d" for example twice it is rendered within the textarea. 因此,例如,如果我两次按下字符“ d”,它将在文本区域内呈现。
3- I would also like the directive to convert comas into dots if they are pressed. 3-我也希望该指令将彗星按点转换成点。
4- a new value has to start and end with number not dots. 4-新值必须以数字开头而不是点开头。
5- only one dot per array value. 5-每个数组值仅一个点。

Here is my code: 这是我的代码:

View/template: 查看/模板:

<script type="text/ng-template" id="form_field_float">
  <textarea only-digits class="form-control" rows="{{dbo.attributes[attobj.name].length + 2}}" ng-model="dbo.attributes[attobj.name]" ng-list="&#10;" ng-trim="false" ng-change="dbo._isDirty = true"></textarea>
</script>

Directive: 指示:

 app.directive('onlyDigits', function () {

      return {
          restrict: 'A',
          require: '?ngModel',
          link: function (scope, element, attrs, ngModel) {
              if (!ngModel) return;
              ngModel.$parsers.unshift(function (inputValue) {

                  var digits = inputValue.split('').filter(function (s) { return (!isNaN(s) && s != ' ' || s == "."); }).join('');
                  console.log(inputValue);
                  ngModel.$viewValue = digits;
                  ngModel.$render();
                  return digits;
              });
          }
      };
  });

Ok regular expression within the directive among replace() was the solution in the end: 最后,replace()中的指令内的正则表达式是最终的解决方案:

template: 模板:

<script type="text/ng-template" id="form_field_float">
  <textarea only-flo class="form-control" rows="{{dbo.attributes[attobj.name].length + 2}}" ng-model="dbo.attributes[attobj.name]" ng-list="&#10;" ng-trim="false" ng-change="dbo._isDirty = true"></textarea>
</script>

directive: 指示:

  app.directive('onlyFlo', function () {

      return {
          restrict: 'A',
          require: '?ngModel',
          link: function (scope, element, attrs, ngModel) {
              if (!ngModel) return;
              ngModel.$parsers.unshift(function (inputValue) {

                  //var digits = inputValue.split('').filter(function (s) { return (!isNaN(s) && s != ' ' || s == '.'); }).join('');
                  var digits=  inputValue.replace(/\.{2,}/g, '.').replace(/e{2,}/gmi, 'e').replace(/[^0-9\.\n\r\-e]/gmi, '');
                  //var digits=  inputValue.split(/\s/).filter(function(s){return isNaN(s) ? false : s}).join('\r');
                  console.log('dig: ' +digits);
                  console.log(inputValue);

                  ngModel.$viewValue = digits;
                  ngModel.$render();
                  return digits;
              });
          }
      };
  });

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM