JSFiddle - React, Tailwind, and code Playground

by hugogo7646

HTML

<div ng-app="app" ng-controller="controller as ctrl">
  <my-form-directive dir-name="myFormDir"></my-form-directive>
  <div ng-click="ctrl.pristineForm('myFormDir')"><button>Set Form Pristine</button></div>.
  
  <my-form-directive dir-name="myFormDir2"></my-form-directive>
  <div ng-click="ctrl.pristineForm('myFormDir2')"><button>Set Form Pristine</button></div>
</div>

JavaScript

angular.module("app", [])
  .controller("controller", ["directiveHandler", function(directiveHandler) {
    var self = this;
    self.pristineForm = function(directiveName) {
   		var directiveName = directiveName ? directiveName : 'myFormDirective';
      directiveHandler.getDirective(directiveName).pristineForm();
    }

  }])
  .directive("myFormDirective", ["directiveHandler", function(directiveHandler) {
    return {
      restrict: "E",
      template: `<div>
                  <form name="myForm">
                    Username : <input type="text" name="username" ng-model="username" required/>
                    <div ng-show="myForm.username.$dirty && myForm.username.$invalid">
                      Please fill in username.
                    </div>
                    <div>Form $pristine : {{myForm.$pristine}}</div>
                  </form>
            </div>`,
      replace: true,
      scope: {
      },
      link: function($scope, $elm, $attrs, $ctrl) {
        var directiveNameAttr = $attrs.dirName ? $attrs.dirName : "myFormDirective";
        directiveHandler.registerDirective(directiveNameAttr, $scope);

        $scope.username = "";
        $scope.pristineForm = function() {
          $scope.myForm.$setPristine();
        }
      }
    };
  }]).factory('directiveHandler', function() {
    var instance_map = {};
    var service = {
      registerDirective: registerDirective,
      getDirective: getDirective,
      deregisterDirective: deregisterDirective
    };

    return service;

    function registerDirective(name, ctrl) {
      instance_map[name] = ctrl;
    }

    function getDirective(name) {
      return instance_map[name];
    }

    function deregisterDirective(name) {
      instance_map[name] = null;
    }
  });