JSFiddle - React, Tailwind, and code Playground

by sunnycyk

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<form name="form">
    Email: <input type="email" name="email" ng-model="user.email" required/>
    Confirmed Email: <input type="email" name="confirmemail" ng-model="user.confirmemail" confirm-email="email" required />
</form>
<p>
    Email Error : {{form.email.$error }}
    ConfirmEmail Error : {{form.confirmemail.$error}}
</p>

JavaScript

var app = angular.module('myApp', []);

app.directive('confirmEmail', function() {
	return {
		restrict: 'A',
		require: 'ngModel',
		link: function(scope, elm, attrs, ctrl) {
			var email = elm.inheritedData('$formController')[attrs.confirmEmail];


			ctrl.$parsers.unshift(function(viewValue) {
		
				if (viewValue === email.$viewValue) {
					ctrl.$setValidity('confirmEmail', true);
					return viewValue;  // Only bind data when valid
				}
				else {
					ctrl.$setValidity('confirmEmail', false);
					return undefined;
				}
			}); 

			email.$parsers.unshift(function(viewValue) {
				ctrl.$setValidity('confirmEmail', viewValue === ctrl.$viewValue);
				return viewValue; // Return this because this is email, not confirmed email
			});
				
		}
	}
});