JSFiddle - React, Tailwind, and code Playground

HTML

<body ng-app="app" ng-controller="Ctrl">

<div>
    <form name="myForm">
        Name: <input name="name" type="text" ng-model="name" validators="nameValidators"/>
        <div ng-show="myForm.name.$dirty && myForm.name.$invalid">
            <span ng-show="myForm.name.$error.pattern">Pattern error</span>
            <span ng-show="myForm.name.$error.minlength || myForm.name.$error.maxlength">Length error</span>
        </div>
        <br/>
        <input type="submit" value="Submit"/>
    </form>
</div>
</body>

JavaScript

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

app.controller("Ctrl", function($scope) {
    var re = /^\w+$/;
    
    $scope.nameValidators = [
        function minlength(value, ngModel) {
            if( value == null || value == "" || value.length >= 3 ) {
                ngModel.$setValidity('minlength', true);
                return value;
            }
            else {
                ngModel.$setValidity('minlength', false);
                return;
            }
        },
        function pattern(value, ngModel) {
            if( value == null || value == "" || re.test(value) ) {
                ngModel.$setValidity('pattern', true);
                return value;
            }
            else {
                ngModel.$setValidity('pattern', false);
                return
            }
        }
    ];
});

app.directive("validators", function($parse) {
    return {
        restrict: "A",
        require: "ngModel",
        link: function(scope, el, attrs, ngModel) {
            var getter = $parse(attrs.validators),
                validators = getter(scope),
                i;
            
            for( i=0; i < validators.length; i++ ) {
                ngModel.$parsers.push((function(index) {
                    return function(value) {
                        return validators[index](value, ngModel);
                    };
                })(i));
            }
        }
    };
});