Geek Answers Handbook

Confirm password field and "Show password" option in AngularJS

I am trying to create a password field that matches the following criteria:

  • A valid password must be between 6 and 24 characters long and have at least one number.
  • If the field contains an invalid password, it must always have a .ng-invalid class.

To make password characters visible, I use two inputs synchronized through the model:

<form name="form" ng-app="myApp" ng-controller="Controller" novalidate>    
<label>
   Password:
    <input type="password" name="uPass" maxlength="24" ng-hide="formFlags.showpass" ng-model="user.pass" ng-required validate-pass />   
    <input type="text" name="uPass" maxlength="24" ng-show="formFlags.showpass" ng-model="user.pass" ng-required validate-pass />
    <span class="message" ng-show="form.uPass.$dirty && form.uPass.$invalid">Must be from 6 to 24 symbols long ang contain at least one digit.</span> 
</label>

<label>
    <input type="checkbox" name="uShowPass" ng-model="formFlags.showpass" toggle-pass/>Show password
</label>    
</form>

See the full code here: http://jsfiddle.net/adept/9uCGQ/44/ .

Here I am trying to do the following:

  • I entered the wrong password. The gets.ng-invalid class input field (red frame).
  • I click "Show password." Password entry hidden text entry becomes visible.

, , . ?

UPD: AngularJS 1.2.x , .

+4
1

formatters.unshift, , .

:

http://jsfiddle.net/9uCGQ/5/

:

       ctrl.$formatters.unshift(function(viewValue) {
            if (viewValue.length >= scope.formFlags.minpasslength && PASS_REGEXP.test(viewValue)) {
                // it is valid
                ctrl.$setValidity('pass', true);
            } else {
                // it is invalid
                ctrl.$setValidity('pass', false);
            } 
            // update model anyway to sync password fields
            return viewValue;
        });

( ) ng-: http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController

+5

More articles:


All Articles