AngularJS - Confirm Password Validation Example

January 13, 2018 | Category : Angular Bootstrap

this Saturday, i will show you how to add password and confirm password match validation in angular js using directive. we will create custom angularjs directive for confirm password validation. i write full example of add confirm password validation using angularjs directive module.

So you have to just follow bellow code for angular js confirm password. we may need to add confirm password validation in registration form or any submit form for create use credentials. so you have to just follow bellow full index file to see code how to add directive with "compareTo".

After reviewing code of this small and simple example you will defiantly understand how it works and how it simple.

So let's create bellow file and run it :)

index.html

<!DOCTYPE html>

<html lang="en" ng-app="liveApp">


<head>

<meta charset="utf-8">

<title>AngularJS - Confirm Password Validation Example</title>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

</head>


<body >


<h2>AngularJS - Confirm Password Validation Example</h2>

<div ng-controller="repeatCtrl">

<form name="liveForm">


<div>

<label>Password</label>

<input type="password" name="livePass" ng-model="livePass" required class="form-control" />

</div>


<div>

<label>Confirm Password</label>

<input type="password" name="repeatPass" ng-model="repeatPass" required compare-to="livePass" class="form-control" />

<span class="error text-danger" ng-show="liveForm.repeatPass.$error.compareTo">

Passwords don't match.

</span>

</div>


</form>

</div>


<script type="text/javascript">

var liveApp = angular.module("liveApp", []);


liveApp.controller("repeatCtrl", function ($scope)

{

$scope.student = {

password: "",

repeatPassword: ""

};

});


liveApp.directive("compareTo", function ()

{

return {

require: "ngModel",

scope:

{

repeatPassword: "=compareTo"

},

link: function (scope, element, attributes, paramval)

{

paramval.$validators.compareTo = function (val)

{

return val == scope.repeatPassword;

};

scope.$watch("repeatPassword", function ()

{

paramval.$validate();

});

}

};

});

</script>


</body>

</html>