JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app">
    <form>
        <input ng-model="test1" type="text" custom ng-minlength="3" /> 
        <input ng-model="test2" type="text" custom ng-minlength="3" /> 
        <input ng-model="test3" type="text" custom ng-minlength="3" />
    </form>
</div>

JavaScript

angular.module('app', [])
.directive('custom', ['$parse', function($parse) {
    return {
        restrict: 'A',
        require: ['ngModel'],
        link: function(scope, element, attrs, ctrls) {
            var model=ctrls[0], form=ctrls[1];
            
            scope.next = function(){
                return model.$valid
            }
            
            scope.$watch(scope.next, function(newValue, oldValue){
                if (newValue && model.$dirty)
                {
                    var nextinput = element.next('input');
                    if (nextinput.length === 1)
                    {
                        nextinput[0].focus();
                    }
                }
            })
        }
    }
}])