Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html  ng-app="app">
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
</head>
<body>
  <form name="testForm" novalidate>
  <div>
    <input name="password1" ng-model="password1"/><br/>
    <input name="password2" ng-model="password2" password-matches="password1" another-directive/>
    <span ng-show="testForm.password2.$invalid && testForm.password2.$dirty" style="color:red">
      <br/>Passwords don't match
    </span>
  </div>
</form>
</body>
</html>
 
var app = angular.module('app', [ ]);
       
app.directive('passwordMatches', function() {
  return {
        require: 'ngModel',
        restrict: 'A',
        scope: {
            otherPasswordFieldValue: '=passwordMatches'
        },
        link: function (scope, elem, attrs, ngModelController) {
            function validate(value) {
                return value === scope.otherPasswordFieldValue;
            }
​
            //For DOM -> model validation
            ngModelController.$parsers.unshift(function (value) {
                var valid = validate(value);
                ngModelController.$setValidity('password-matches', valid);
                return valid ? value : undefined;
            });
​
            //For model -> DOM validation
            ngModelController.$formatters.unshift(function (value) {
                ngModelController.$setValidity('password-matches', validate(value));
                return value;
            });
            
            scope.$watch(function() { return scope.otherPasswordFieldValue }, function () {
                var valid = validate(ngModelController.$viewValue);
                ngModelController.$setValidity('password-matches', valid);
            });
        }
    };
});
    
​
app.directive('anotherDirective', function($compile) {
  return {
    compile: function(compileElement) {
      compileElement.removeAttr('another-directive');
      return function(scope, element) {
        newe = angular.element(element.html());
        parent= element.parent();
        element.remove();
        parent.append(newe);
        $compile(newe)(scope);   
      };
    }
  };
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers