JSFiddle - React, Tailwind, and code Playground

HTML

<body ng-app="app">
    <div ng-controller="demoCtrl as vm">
        <form name="demo-form">
            <input type="text" ng-model="vm.testValue" bug-demo />
        
        
        </form>
    </div>    
    
</body>

JavaScript

(function() {
    /** 
    * Bootstraps app.  injects dependent modules
    */
    angular.module('app', [
        /*
         * Feature areas
         */
        'app.demo'
    ]);

})();

(function() {

    angular
        .module('app.demo')
        .controller('demoCtrl', demoCtrl);

    function demoCtrl() {
        var vm = this;
        vm.testValue="";
        
    }
})();

(function() {

    angular
        .module('app.demo')
        .directive('bugDemo', function() {
          return {
            require: '?ngModel',
            link: function(scope, element, attrs, ngModelCtrl) {
              if(!ngModelCtrl) {
                return;
              }

              ngModelCtrl.$parsers.unshift(function(val) {
                val=val ? val : '';
                var regex = /[^0-9a-zA-Z-&@\/\'%.\s]+/g;
                var clean = val.replace(regex, '');

                if (val !== clean) {
                  ngModelCtrl.$setViewValue(clean);
                  ngModelCtrl.$render();
                }
                return clean;
              });
            }
          };
        });
})();