JSFiddle - React, Tailwind, and code Playground

by Mikey

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.js"></script>
<div ng-app="myApp" ng-controller="TestCtrl">
    <form name="testForm">
        <input type="text" name="user" ng-model="user" ng-change="test()" required name-length="3"/>
        {{user}}
        <pre>{{err | json }}</pre>
    </form>
</div>

JavaScript

angular.module('myApp', [])
  .controller('TestCtrl', function ($scope) {
    $scope.test = function () {
      console.log('ngChange fired');
    };
  })
  .directive('nameLength', function () {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function ($scope, element, attrs, ngModelCtrl) {
        ngModelCtrl.$validators.nameLength = function (modelValue, viewValue) {
          var value = modelValue || viewValue;
          var isValid = ngModelCtrl.$isEmpty(value) || value.length >= attrs.nameLength;
          return isValid;
        };

        ngModelCtrl.$viewChangeListeners.push(function () {
          $scope.errors = angular.copy(ngModelCtrl.$error);
        });
      }
    };
  });