JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
    <div ng-controller="demoCtrl as vm">
        <ng-form name="vm.demoForm">
            <input type="text" name="demoTxt" ng-model="vm.testValue" minlength="2" ng-model-options="{ allowInvalid: true }" bug-demo />
        Valid:  {{vm.demoForm.demoTxt.$valid}}  
        
        </ng-form>
    </div>

JavaScript

(function() {
    angular.module('myApp', []);
})();

(function() {

    angular
        .module('myApp')
        .controller('demoCtrl', demoCtrl);

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

(function() {

    angular
        .module('myApp')
        .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;
              });
            }
          };
        });
})();