Question

编写指令以验证＆＃34;确认密码＆＃34;输入字段匹配＆＃34;新密码＆＃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.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无法正常工作。

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

0 个答案: