My current challenge involves building a custom directive (inspired by an example I came across) to ensure that the confirm password matches the initial password input. Even though all my console.log() statements are executing and displaying, it seems like the validity status is not being updated as expected. The 'pass' value remains true despite seeing "set to false" in the console output.
Here's the code snippet:
<form ng-submit="signup()" name="profileForm">
<div class="form-group"><label class="form-label" for="input-example-2">Password</label>
<input class="form-input" ng-model="pnew" type="password" name="pnew" placeholder="Password" required></div>
<div class="form-group"><label class="form-label" for="input-example-2">Confirm Password</label>
<input class="form-input" name="confirm" ng-model="confirm" type="password" placeholder="Password" required pwcheck></div>
{{profileForm.confrim.$error.pass}}
<hr>
{{profileForm.confirm.$error}}
<hr>
{{profileForm.confirm.$valid}}
<span ng-show="profileForm.confirm.$error.pwCheck">the passwords don't match</span>
<div class="form-group"><button class="btn btn-primary">Sign up</button></div>
</form>JS code for the pwcheck directive
.directive('pwcheck', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
function valid(value){
scope.$watch("confirm", function(newval, oldval){
console.log(value);
console.log(scope.pnew);
if(value==scope.pnew){
console.log("success!");
ctrl.$setValidity('pass', true);
return value;
}
else {
console.log("set to false");
ctrl.$setValidity('pass', false);
return undefined;
}
});
}
ctrl.$parsers.push(valid);
} } });