JSFiddle - React, Tailwind, and code Playground

by chandings

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular.js"></script>
<div ng-app="myApp" ng-controller="myController">
<fr-input 
  ng-model="data"
  validators="nameValidator"
  error-messages="nameErrorMessages"
   ></fr-input>
{{data}}
</div>

CSS

.error{
  border-color:red;
}

JavaScript

var app = angular.module("myApp",[]);

app.controller("myController", function($scope){
	$scope.data = "asf";
  $scope.nameValidator = {
  	pattern:"^([a-zA-Z]+(.)?[\s]*)$",
    patternOptions:"",
    min:3,
 	 	max:65
  };
  
  $scope.nameErrorMessages = {
  	pattern:"The entered name can contain only alphabets!*",
    min:"The entered name must be of 3 or more characters!*",
 	 	max:"The entered name must be less than 65 characters!*"
  };
});

app.directive("frInput", function(){
	return {
  	scope:{
      "validators":"=",
      "errorMessages":"="
    },
    require:"ngModel",
  	template:`<input ng-class='{"error":hasError}' ng-keyup='changeHandler()' ng-model='text' ><span ng-if='hasError'><br>{{error}}</span>`,
    link:function(scope, elem, attr, ctrl){
      /*ctrl.$formatters.push(function(value){
      	return value.split("").reverse().join("");
      });*/
      scope.hasError = false;
      ctrl.$render = function() {  
          scope.text = ctrl.$viewValue;
      };
      ctrl.$parsers.push(function(value){
        var pattern = new RegExp(
        	scope.validators.pattern,
          scope.validators.patternOptions
        );
        if(!pattern.test(value)){
        	scope.hasError = true;
          scope.error = scope.errorMessages.pattern;
          return null;
        }else{
        	scope.hasError = false;
        }
        if(value.length > scope.validators.max){
        	scope.hasError = true;
          scope.error = scope.errorMessages.max;
          return null;
        }else{
        	scope.hasError = false;
        }
        if(value.length < scope.validators.min){
        	scope.hasError = true;
          scope.error = scope.errorMessages.min;
          return null;
        }else{
        	scope.hasError = false;
        }
        return value
      });
			scope.changeHandler = function(){
      	 ctrl.$setViewValue(scope.text);
			}
    }
  }
})