简体   繁体   中英

Angular textarea directive: numbers allowed, no commas, dots allowed?

I have a textarea which holds multiple values stored in ng-model as an array. 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.
2- if same key is pressed twice it is accepted until a new key is pressed. So if I press the character "d" for example twice it is rendered within the textarea.
3- I would also like the directive to convert comas into dots if they are pressed.
4- a new value has to start and end with number not dots.
5- only one dot per array value.

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:

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;
              });
          }
      };
  });

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

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