当新密码无效时,AngularJS 1.3会确认密码

时间:2016-12-02 21:38:02

标签: angularjs validation

编写指令以验证"确认密码"输入字段匹配"新密码"您可以在输入字段中传入存储新密码的模型或整个输入。然而,两者都有一个严重的缺点。见下文:

传递模型方法

<form name="vm.passwordForm">
    <input type="password" ng-model="vm.password.new" name="newPassword" required ng-minlength="6"/>
    <input type="password" ng-model="vm.password.confirm" name="confirmPassword" required password-confirm="vm.password.new"/>
</form>
angular.module('passwordConfirm, [])
.directive('passwordConfirm', function () {
    function link($scope, $element, $attrs, $ctrl) {
        $ctrl.$validators.confirm = function confirm(modelValue, viewValue) {
            var value = modelValue || viewValue;
            if (typeof value === 'undefined' || value.length === 0) {
                return true;
            }           
            // $scope.passwordConfirm won't be set if that input is invalid
            return value == $scope.passwordConfirm;
        };

        $scope.$watch("passwordConfirm", function () {
            $ctrl.$validate();
        });
    }

    return {
        require: 'ngModel',
        scope: {
            passwordConfirm: "="
        },
        link: link        
    };
});

当新密码字段未通过自己的验证时,会出现上述方法的问题。比如说,用户输入&#34; abc&#34;作为新密码。这少于6个字符,因此它将无法通过ng-minlength验证,这反过来会阻止vm.password.new模型被设置为&#34; abc&#34;。如果用户随后输入了&#34; abc&#34;在确认密码字段中,他会收到一个错误,告诉他密码不匹配,即使他们这样做。

传入输入法

<form name="vm.passwordForm">
    <input type="password" ng-model="vm.password.new" name="newPassword" required ng-minlength="6"/>
    <input type="password" ng-model="vm.password.confirm" name="confirmPassword" required password-confirm="vm.passwordForm.newPassword"/>
</form>
angular.module('passwordConfirm, [])
.directive('passwordConfirm', function () {
    function link($scope, $element, $attrs, $ctrl) {
        $ctrl.$validators.confirm = function confirm(modelValue, viewValue) {
            var value = modelValue || viewValue;
            if (typeof value === 'undefined' || value.length === 0) {
                return true;
            }            
            return value == $scope.passwordConfirm.$viewValue;
        };

        // This doesn't work
        $scope.$watch("passwordConfirm", function () {
            $ctrl.$validate();
        });
    }

    return {
        require: 'ngModel',
        scope: {
            passwordConfirm: "="
        },
        link: link        
    };
});

此方法公开输入字段的$ viewValue属性,该属性不必经过验证。如果原始密码无效,则确认密码字段不会引发错误。它只关心两个字段是否匹配。但问题是$ scope。$ watch命令不起作用。我不确定为什么,但它只会在页面加载时触发一次,并且在更新字段时不会触发。

任何接近的想法都更好,如何克服每个缺点?

更新:我发现设置ng-model-options =&#34; {allowInvalid:true}&#34;即使密码验证失败,新密码字段也会更新模型,允许确认密码字段与之匹配。但是,我不确定这是最好的方法,而且我仍然很好奇为什么输入字段上的$ scope。$ watch无法正常工作。

0 个答案:

没有答案