JSFiddle - React, Tailwind, and code Playground

by alisabzevari

HTML

<div ng-app="app" ng-controller="Ctrl">
  <form name="mainForm" ng-submit="ok()" form-custom-validation="{passwordMatch: validatePasswordMatch}">
    <input type="password" name="password" ng-model="password" />
    <input type="password" name="confirmPassword" ng-model="confirmPassword" />
    <div ng-if="mainForm.$error.passwordMatch">
      passwords does not match!
    </div>
    <button type="submit"> OK </button>

  </form>
</div>

JavaScript

var app = angular.module("app", ["formLevelValidation"]);
app.controller("Ctrl", function($scope) {
  $scope.validatePasswordMatch = function() {
    var result = !$scope.password || !$scope.confirmPassword || $scope.password === $scope.confirmPassword;
    return result;
  }
});

var formLevelValidation = angular.module("formLevelValidation", []);
formLevelValidation.directive("formCustomValidation", [function () {
  var ddo = {
    restrict: "A",
    require: "^form",
    link: (scope, IElement, iAttrs, ngForm) => {
      var validators = scope.$eval(iAttrs.formCustomValidation);

			Object.keys(validators).forEach(function(key){
      	scope.$watch(validators[key], function(newValue){
        	ngForm.$setValidity(key, newValue);
        });
      });
    }
  };

  return ddo;
}]);