Question

我正在尝试为密码确认创建自己的验证，并将错误放在$ error上。这是我的代码：

HTML：

<input ng-model="user.password2" type="password" name="password2" required 
ng-keyup="confirmPassword(user.password, user.password2)">
<div ng-messages="register.password2.$error" ng-if="register.password2.$dirty">
   <div ng-message="required">Password is required</div>
   <div ng-message="passwordsDontMatch">Passwords don't match</div>
</div>

JS：

$scope.confirmPassword = function (pass1, pass2) {
        if (angular.isUndefined(pass1) || angular.isUndefined(pass2) || pass1.trim() != pass2.trim()) {
            $scope.register.password2.$error["passwordsDontMatch"] = true;
        } else {
            delete $scope.register.password2.$error["passwordsDontMatch"];
        }
        console.log($scope.register.password2.$error);
    };

看起来它正在发挥作用。当密码相同时，不显示消息，实际上$ error对象为空。但输入仍然无效：（$scope.register.password2.$invalid == true）

你可以在这个傻瓜中看到我在说什么：http://plnkr.co/edit/ETuVqsdSaEBWARvlt4RR?p=preview 尝试2个相同的密码。消息将消失，但当你从输入模糊时，它仍然是红色的，因为在内部它是$ invalid

Answer 1

问题可能来自于您未在匹配正则表达式模式的第一个字段中键入密码的事实。因此，第一个密码未定义，因为它不遵守ng模式验证规则。

那就是说，你不应该直接修改$ error数组。相反，您应该使用$setValidity()设置字段的有效性。这不仅会自动设置和删除错误，还会处理$ invalid / $ valid属性，添加和删除CSS类等。

var valid = !((angular.isUndefined(pass1) || angular.isUndefined(pass2) || pass1.trim() != pass2.trim()));
$scope.register.password2.$setValidity("passwordsDontMatch", valid);

这里是working example。但请记住首先输入有效密码。

此外，不应使用ng-keyup实现此检查，而应将其作为指令，这将向表单输入的验证器添加验证器。这将确保无论输入第二个密码的方式进行检查（即仅通过使用鼠标进行复制/粘贴，或者只是通过编程方式预先填充表格。

即使错误为空，输入也无效

1 个答案: