javascript - How to remove special character from input or textarea using AngularJs ?

Question

I am trying to implement AngularJs directive to remove any special character from input and textarea but its not working and i do not see any error in console. I also have tooltip when user add text to fields it shows character count in the tooltip, numbers are not coming correct if i add below text to the input and textarea.

Any help will be appreciated i am new to AngularJS, How can i achieve this task using Angular directive ?

main.html

<textarea rows="2" class="form-control"
    ng-model="processDTO.processStatementText"
    name="processStatement" id="processStatement"
    no-special-char
    placeholder="Process Statement" maxlength="4000" required
    data-tooltip-html-unsafe="<div>{{4000 - processDTO.processStatementText.length}} characters left</div>"
    tooltip-trigger="{{{true: 'focus', false: 'never'}[processDTO.processStatementText.length >= 0 || processDTO.processStatementText.length == null ]}}"
    tooltip-placement="top" tooltip-class="bluefill">
</textarea>

specialCharacterDirective.js

 angular.module('App').directive('noSpecialChar', function() {
   'use strict'
    return {
      require: 'ngModel',
      restrict: 'A',
      link: function(scope, element, attrs, modelCtrl) {
        modelCtrl.$parsers.push(function(inputValue) {
          if (inputValue == null)
            return ''
         var cleanInputValue = inputValue.replace(/[^ws]/gi, '');
          if (cleanInputValue != inputValue) {
            modelCtrl.$setViewValue(cleanInputValue);
            modelCtrl.$render();
          }
          return cleanInputValue;
        });
      }
    }
  });

doc.text

6.  The Risk/Control reference id is seen on the Process Search grids, but when I search by Risk/Control, I don’t see the corresponding control/risk grid having the ref id column however tool tip has it
7.  The label change “Originating Source System Process/Risk/Control ID” is not done in View/Search Inventory tool tips of Process, Risk, Control grids, It has to be fixed for all the 3 searches “By Process/Risk/Control”
2.  Upload Template Header – Risk Causal and Impact comments are color coded as mandatory but they are optional. Similary the Originating Source System Process/Risk/control ID
3.  In the upload template, for any of the multi value fields, I use an invalid delimiter ‘:’, Eg: 13:7 , for some reason this changes the cell format to time format and thereafter I am not able to give any single values, its always converted to time format. Not sure if this is a training issue, but want to put it on the table to see if it requires any fix at all
4.  In Upload, for the grid field length validations, the filter doesn’t works on Row Number and Max Allowed columns. ~!@#$%^&*()_+|}{:"?><,./';[]=-0987654321`
5.  ERH All levels added in the View End to End ERH screen – Sort and Filter doesn’t works, After clicking on this field, none of the other filter/sort works on the page. Also the sort indicator(black triangle) is not visible, I believe the column width needs to be adjusted.
6.  The Risk/Control reference id is seen on the Process Search grids, but when I search by Risk/Control, I don’t see the corresponding control/risk grid having the ref id column however tool tip has it
7.  The label change “Originating Source System Process/Risk/Control ID” is not done in View/Search Inventory tool tips of Process, Risk, Control grids, It has to be fixed for all the 3 searches “By Process/Risk/Control”
2.  Upload Template Header – Risk Causal and Impact comments are color coded as mandatory but they are optional. Similary the Originating Source System Process/Risk/control ID
3.  In the upload template, for any of the multi value fields, I use an invalid delimiter ‘:’, Eg: 13:7 , for some reason this changes the cell format to time format and thereafter I am not able to give any single values, its always converted to time format. Not sure if this is a training issue, but want to put it on the table to see if it requires any fix at all
4.  In Upload, for the grid field length validations, the filter doesn’t works on Row Number and Max Allowed columns. ~!@#$%^&*()_+|}{:"?><,./';[]=-0987654321`

Answer 1

Try this:

angular.module("test", []).filter("purger", function() {
    return function(input) {
          return input.replace(/[^ws]/gi, "");
        }
    }).controller("testController", function($scope, purgerFilter) {
    $scope.value = purgerFilter("^..test/$");
        $scope.onChange = function() {
          $scope.value = purgerFilter($scope.value);
        }
    })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="test" ng-controller="testController">
    <textarea type="text" ng-model="value" ng-change="onChange()" row=2></textarea>
</body>