I am trying to implement an password match validation in Angular JS on my webpage and for some reason it doesn't work. I have follow religiously a step by step and implemented the method from the controller as well as i downloaded the angular file, which is in a folder called includes. Even tough it doesn't seem to work. Can someone give me a help?
My field on the register page
<html lang="en-US" ng-app="myApp">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="includes/angular.min.js"></script>
<script type="text/javascript" src="includes/fintechjobs.js"></script>
<style>
.msg-block {
margin-top:5px;
}
.msg-error {
color:#F00;
font-size:14px;
}
</style>
</head>
<body class="size-1140" ng-controller="stageController">
<form name="myForm" class="customform" method="POST" action="registercandidate.php" >
<input type="password" name="pw1" id="pw1" ng-model="pw1" ng-required="" placeholder="Password"><br>
<input type="password" name="pw2" id="pw2" ng-model="pw2" ng-required="" pw-check="pw1" placeholder="Confirm Password"><br>
<div class="msg-block" ng-show="myForm.$error">
<span class="msg-error" ng-show="myForm.pw2.$error.pwmatch">Passwords don't match.</span>
</div>
<input type="submit" class="button button-dark-stroke text-size-12" value="Submit" style="width:100px;">
</form>
</body>
</html>
This is my JS file with the Angular app
'use strict';
angular.module('myApp', ['myApp.directives']);
/* Controllers */
function stageController($scope) {
$scope.pw1 = 'pw1';
}
/* Directives */
angular.module('myApp.directives', [])
.directive('pwCheck', [function () {
return {
require: 'ngModel',
link: function (scope, elem, attrs, ctrl) {
var firstPassword = '#' + attrs.pwCheck;
elem.add(firstPassword).on('keyup', function () {
scope.$apply(function () {
// console.info(elem.val() === $(firstPassword).val());
ctrl.$setValidity('pwmatch', elem.val() === $(firstPassword).val());
});
});
}
}
}]);
Any particular reason that wouldn't work?
