75132

AngularJS compare password fields

Question:

I am trying to compare two password fields using a custom directive. It doesn't seem to be doing anything and I don't know how to debug this. Here is my code:

<strong>directive:</strong>

.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 () { var v = elem.val()===$(firstPassword).val(); ctrl.$setValidity('pwmatch', v); }); }); } }; }])

<strong>html:</strong>

<div class="container" ng-controller="Reset"> <!-- P A S S W O R D --> <div class="form-group" ng-class="{'has-error' : reset.password.$invalid && reset.password.$dirty}"> <div> <input type="password" class="form-control" name="password" placeholder="Password" ng-model="resetForm.AngularJS password" required ng-minlength="8"> <span class="help-block has-error" ng-if="reset.password.$dirty"> <span ng-show="reset.password.$error.required">Password is required.</span> <span ng-show="reset.password.$error.minlength">Password must be at least 8 characters.</span> </span> </div> </div> <!-- C O N F I R M P A S S W O R D --> <div class="form-group" ng-class="{'has-error' : reset.confirmPassword.$invalid && reset.confirmPassword.$dirty}"> <div> <input type="password" class="form-control" name="confirmPassword" placeholder="Confirm Password" ng-model="resetForm.confirmPassword" required pw-check="reset.password"> <span class="help-block has-error" ng-if="reset.password.$error.pwmatch"> <span ng-show="reset.password.$error.pwmatch">Passwords must match.</span> </span> </div> </div> </div>

Answer1:

I use the following directive in my sign up to compare the password fields.

app.directive('validateIdentical', function ValidateIdenticalDirective(){ return { restrict: 'A' , scope: { expression: '<validateIdentical' } , require: ['ngModel'] , link: link }; function link($scope, $element, $attrs, $controllers){ var $ngModel = $controllers[0]; $ngModel.$validators.identical = function isIdentical(modelValue){ return $scope.expression == modelValue; }; } });

Used like this:

<form> <label>Password: <input type="password" ng-model="vm.password"></label><br> <label>Confirm: <input type="password" ng-model="vm.confirmPassword" validate-identical="vm.password"></label> </form>

Recommend

  • S4 constructor initialize and prototype
  • Preventing ctrl+z in browser
  • Control key + click event on google map
  • Calculate time difference in hh:mm:ss with simple javascript/jquery
  • IE11 throwing “SCRIPT1014: invalid character” where all other browsers work
  • MongoDb aggregation
  • How to use remove-erase idiom for removing empty vectors in a vector?
  • Refering to the class itself from within a class mehod in Objective C
  • jQuery .attr() and value
  • Java: can you cast Class into a specific interface?
  • FileReader+canvas image loading problem
  • Using jQuery closest() method with class selector
  • Insert into database using onclick function
  • Deselecting radio buttons while keeping the View Model in synch
  • Can I display google adwords (AdView) in javafx on android
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Align navbar back button on right side
  • How to add date and time under each post in guestbook in google app engine
  • How to set/get protobuf's extension field in Go?
  • DirectX11 ClearRenderTargetViewback with transparent buffer?
  • Validaiting emails with Net.Mail MailAddress
  • sending/ receiving email in Java
  • Web-crawler for facebook in python
  • Akka Routing: Reply's send to router ends up as dead letters
  • Cannot Parse HTML Data Using Android / JSOUP
  • How to get icons for entities from eclipse?
  • WPF Applying a trigger on binding failure
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • Angular 2 constructor injection vs direct access
  • Java static initializers and reflection
  • Android Google Maps API OnLocationChanged only called once
  • apache spark aggregate function using min value
  • unknown Exception android
  • JaxB to read class hierarchy
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • UserPrincipal.Current returns apppool on IIS
  • Unable to use reactive element in my shiny app
  • java string with new operator and a literal