AngularJS中带有验证和“显示密码”选项的密码字段答案

【问题标题】：Password field with validation and "Show password" option in AngularJSAngularJS中带有验证和“显示密码”选项的密码字段
【发布时间】：2014-01-16 12:23:22
【问题描述】：

我正在尝试创建一个符合以下条件的密码字段：

有效密码长度应为 6 到 24 个符号，并且至少包含一位数字。
当字段包含无效密码时，它应该始终具有 .ng-invalid 类。

为了使密码符号可见，我使用了两个通过模型同步的输入：

<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>

在此处查看完整代码：http://jsfiddle.net/adept/9uCGQ/44/。

在这里，我正在尝试执行以下操作：

我输入了无效密码。输入字段gets.ng-invalid class （红色边框）。
我单击“显示密码”。密码输入获取隐藏，文本输入可见。

问题是直到我改变它的价值才被验证。如何让它在显示后立即生效？

UPD: 在 AngularJS 1.2.x 及更高版本中，我的示例工作正常，该问题仅与较低版本有关。

【问题讨论】：

需要注意的一点是，如果您想将输入的名称用于字段验证，则输入的名称必须是唯一的，否则它将被覆盖。您需要为文本字段重命名 uPass 并在 form.uPass.$dirty && form.uPass.$invalid 中引用它们

标签： javascript validation angularjs

【解决方案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-controller 文档中的两个属性（解析器和格式化程序）的更多信息：http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController

【讨论】：

谢谢，你的回答对我很有用。