Angular: Empty Fiddle

http://angularjs.org/

by pkozlowski_opensource

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap.min.css">
<div class="well" ng-controller="MyCtrl">
  <form name="form">
      
      <label>e-mail</label>
      <input name="email" type="email" required ng-model="email">      
      <label>repeat e-mail</label>
      <input name="emailRepeat" type="email" required ng-model="emailRepeat" ui-validate-equals="email">
      <span ng-show='form.emailRepeat.$error.equal'>Both e-mail adresses must match</span>
      <hr>  
      email errors: {{form.email.$error | json}}<br>
      emailRepeat errors: {{form.emailRepeat.$error | json}}<br>  
  </form>       
</div>

JavaScript

var myApp = angular.module('myApp', []).directive('uiValidateEquals', function() {

    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, elm, attrs, ctrl) {

            function validateEqual(myValue, otherValue) {
                if (myValue === otherValue) {
                    ctrl.$setValidity('equal', true);
                    return myValue;
                } else {
                    ctrl.$setValidity('equal', false);
                    return undefined;
                }
            }

            scope.$watch(attrs.uiValidateEquals, function(otherModelValue) {
                validateEqual(ctrl.$viewValue, otherModelValue);               
            });

            ctrl.$parsers.unshift(function(viewValue) {
                return validateEqual(viewValue, scope.$eval(attrs.uiValidateEquals));
            });

            ctrl.$formatters.unshift(function(modelValue) {
                return validateEqual(modelValue, scope.$eval(attrs.uiValidateEquals));                
            });
        }
    };
});

function MyCtrl($scope) {

}