Password check box Error AngularJS min / maxlength

Question

I made a password field that shows the password when checking the box.
I use ng-minlenght and ng-maxlength to control password length.

When the password is between the minimum and maximum length of the input field, it displays the password text as it should.

But when the password is invalid / not between the minimum and maximum field length, I get the emtpy value.

Plnkr example

Is this a bug in Angular, or am I doing something wrong?

Answer 1

This is by design, but I cannot find the link in the documents in which it is explicitly indicated. Angular does not modify your model until the validation criteria are met. You can see this by adding {{user.password}} above your entries ( here ). You will not see the text on the page until you type 8 characters.

You can get around this by using a directive that manually synchronizes two text fields as follows:

http://jsfiddle.net/langdonx/K6Qgm/11/

HTML

 <div ng-app="app" ng-controller="x"> password is: {{user.password}} <br/> <br/> standard input: <input ng-model="user.password" name="uPassword" type="password" ng-hide="isChecked" ng-minlength="8" ng-maxlength="20" placeholder="Password" required/> <br/> <br/> password directive: <password ng-model="user.password" name="uPassword" /> </div> 

Javascript

 function x($scope) { $scope.user = { password: 'x' }; } angular.module('app', []) .directive('password', function () { return { template: '' + '<div>' + ' <input type="text" ng-model="ngModel" name="name" ng-minlength="8" ng-maxlength="20" required />' + ' <input type="password" ng-model="ngModel" name="name" ng-minlength="ngMinlength" required />' + ' <input type="checkbox" ng-model="viewPasswordCheckbox" />' + '</div>', restrict: 'E', replace: true, scope: { ngModel: '=', name: '=' }, link: function (scope, element, attrs) { scope.$watch('viewPasswordCheckbox', function (newValue) { var show = newValue ? 1 : 0, hide = newValue ? 0 : 1, inputs = element.find('input'); inputs[show].value = inputs[hide].value; inputs[hide].style.display = 'none'; inputs[show].style.display = ''; }); } }; });