JSFiddle - React, Tailwind, and code Playground

by bullrout

HTML

<script src="https://code.angularjs.org/1.0.8/angular.min.js"></script>
<form class="form-horizontal" role="form" novalidate name="frm" id="frm" rc-submit="submitForm()">
    
   
        <div class="form-group" data-ng-class="{'has-error': rc.frmStep1.needsAttention(frm.email), 'has-success': !rc.frmStep1.needsAttention(frm.email) && !frm.email.$pristine }">
            <label for="inputEmail3" class="col-sm-4 control-label">Email</label>
            <div class="col-sm-6">
                <input type="email" class="form-control" id="inputEmail3" placeholder="Email" name="email" required data-ng-model="currentSession.email">
                <p>Please enter valid email address</p>
            </div>
        </div> 
    
 </form>
    
    <p data-ng-controller="MyCtrl"> I'd like to call this form post from another controller 
        <a href="" data-ng-click="submitTheForm()"> call the function programatically </a>
    </p>

JavaScript

var myapp = angular.module('myapp');

myapp.controller('MyCtrl', function ($scope) {
   var fn;
		
		$scope.$on("submitVal", function(message){
			 fn = $scope.$eval(message.targetScope.submitFunction);
		});

		$scope.submitTheForm = function(route) {
		    fn.submit();
		};
});


var rcSubmitDirective = {
	'rcSubmit': ['$parse', function ($parse) {

		return {
			restrict: 'AE',
			require: ['rcSubmit', '?form'],

			controller: ['$scope', function () {

				this.attempted = false;

				var formController = null;

				this.setAttempted = function() {
					this.attempted = true;
				};

				this.setFormController = function(controller) {
					formController = controller;
				};

				this.needsAttention = function (fieldModelController) {
					if (!formController) return false;

					if (fieldModelController) {
						return fieldModelController.$invalid && (fieldModelController.$dirty || this.attempted);
					} else {
						return formController && formController.$invalid && this.attempted && (formController.$dirty || this.attempted);
					}
				};
			}],
			compile: function(cElement, cAttributes, transclude) {
				return {
					pre: function(scope, formElement, attributes, controllers) {

						var submitController = controllers[0];
						var formController = (controllers.length > 1) ? controllers[1] : null;

						submitController.setFormController(formController);

						scope.rc = scope.rc || {};
						scope.rc[attributes.name] = submitController;
					},
					post: function(scope, formElement, attributes, controllers) {

						var submitController = controllers[0];
						var formController = (controllers.length > 1) ? controllers[1] : null;
						var fn = $parse(attributes.rcSubmit);

						scope.submitFunction = attributes.rcSubmit;

						scope.$emit("submitVal",attributes.rcSubmit);


						formElement.bind('submit', function () {
							submitController.setAttempted();
							if (!scope.$$phase) scope.$apply();

							if (!formController.$valid) return...