angularjs指令来检查密码已多次不工作 [英] angularjs directive to check password has been repeated not working

问题描述

试图让一个AngularJS指令的工作，我下面这个教程：的http://sahatyalkabov.com/create-a-tv-show-tracker-using-angularjs-nodejs-and-mongodb/

Trying to make an AngularJS directive work, I'm following this tutorial: http://sahatyalkabov.com/create-a-tv-show-tracker-using-angularjs-nodejs-and-mongodb/

在一个注册表格，该指令被称为重复密码，检查输入的形式两封电子邮件是：

In a Signup form, the directive called repeat-password, checks if the two emails input in a form correspond:

<div class="form-group" ng-class="{ 'has-success' : signupForm.confirmPassword.$valid && signupForm.confirmPassword.$dirty, 'has-error' : signupForm.confirmPassword.$invalid && signupForm.confirmPassword.$dirty }">
    <input class="form-control input-lg" type="password" name="confirmPassword" ng-model="confirmPassword" repeat-password="password" placeholder="Confirm Password" required>

    <div class="help-block text-danger my-special-animation" ng-if="signupForm.confirmPassword.$dirty"ng-messages="signupForm.confirmPassword.$error">
       <div ng-message="required">You must confirm password.</div>
       <div ng-message="repeat">Passwords do not match.</div>
    </div>
 </div>

 <button type="submit" ng-disabled="signupForm.$invalid" class="btn btn-lg btn-block btn-primary">Create Account</button>

在html作品的必要组成部分，但不是重复密码的一部分，任何错误消息显示，它并不$ P $从提交表单pvent我，我直接传送到提交按钮会导致太。
在code，我使用的指令本身如下：

The required part of the html works but not the repeat-password part, no error message is showing, it doesn't prevent me from submitting the form and I'm directly routed to where the submit button leads too. The code that I'm using for directive itself is the following:

angular.module("MyApp")
    .directive("repeatPassword", function () {
        return {
            require: "ngModel",
            link: function (scope, elem, attrs, ctrl) {
                var otherInput = elem.inheritedData("$formController")[attrs.repeatPassword];
                ctrl.$parsers.push(function (value) {
                    if (value === otherInput.$viewValue) {
                        ctrl.$setValidity("repeat", true);
                        return value;
                    }
                    ctrl.$setValidity("repeat", false);
                });
                otherInput.$parsers.push(function (value) {
                    ctrl.$setValidity("repeat", value === ctrl.$viewValue);
                    return value;
                });
            }
        };
    });

我不知道，如果它是有用的，但我使用AngularJS V1.3.0-beta.15和角ui.router 0.2.10。

I don't know if it's useful but I'm using AngularJS v1.3.0-beta.15 and Angular-ui.router 0.2.10.

推荐答案

下面是评论和引用其他SO问题进行fie​​ldMatch指令的通用版本。它已经过测试与两个1.2和1.3测试版。

Here is a generic version of a fieldMatch directive with comments and references to other SO questions. It has been tested with both 1.2 and 1.3-beta.

.directive('fieldMatch', function () {
    return {
        restrict: 'A',
        scope: true,
        require: 'ngModel',
        link: function (scope, elem, attrs, ngModel) {
            var checkFieldMatch = function () {
                // WARNING - FIXME:
                // when a validator fails (returns false), then the underlying model value is set to undefined
                //
                // http://stackoverflow.com/questions/24692775
                // http://stackoverflow.com/questions/24385104
                //
                // => solution: use ngModel.$viewValue instead of ngModel.$modelValue

                var fieldMatch = scope.$eval(attrs.dsFieldMatch),
                    value = ngModel.$modelValue || ngModel.$viewValue;

                // If fieldMatch or ngModel.$viewValue is defined,
                // they should match
                if (fieldMatch || value) {
                    return fieldMatch === value;
                }
                return true;
            };

            scope.$watch(checkFieldMatch, function (n) {
                //set the form control to valid if both
                //passwords are the same, else invalid
                ngModel.$setValidity('fieldMatch', n);
            });
        }
    };
});

请参阅这些2其他问题：

See these 2 other questions:

Angularjs setValidity造成modelValue不更新​​

密码匹配验证器的管道会产生意想不到的效果

这篇关于angularjs指令来检查密码已多次不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！