Angular js中的密码匹配验证答案

【问题标题】：Password match validation in angular jsAngular js中的密码匹配验证
【发布时间】：2015-06-24 04:35:13
【问题描述】：

谁能解释一下这个密码匹配是如何工作的？我浏览了文档，但对 require:ngModel 控制器感到困惑。

在脚本里面，这三行是什么意思：

var originalModel = $parse(attrs.valueMatches),
secondModel = $parse(attrs.ngModel);
ngModel.$setValidity(attrs.name, newValue === secondModel(scope));

这里的attrs.ngModel 是指ngModel 控制器还是指令？

attrs.ngModel是获取第一个输入字段的属性还是确认密码输入字段？

attrs.name - 我在代码中没有看到任何 name 属性。

<!DOCTYPE html>
<html ng-app="myApp" >
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        <link rel="stylesheet" href="style.css" />

        <script>
            "use strict";
            var app = angular.module('myApp', [])

            app.directive('valueMatches', ['$parse', function ($parse) {
                    return {
                        require: 'ngModel',
                        link: function (scope, elm, attrs, ngModel) {
                            var originalModel = $parse(attrs.valueMatches),
                                    secondModel = $parse(attrs.ngModel);
                            // Watch for changes to this input
                            scope.$watch(attrs.ngModel, function (newValue) {
                                ngModel.$setValidity(attrs.name, newValue === originalModel(scope));
                            });
                            // Watch for changes to the value-matches model's value
                            scope.$watch(attrs.valueMatches, function (newValue) {
                                ngModel.$setValidity(attrs.name, newValue === secondModel(scope));
                            });
                        }
                    };
                }]);
        </script>

        <title>Registration Form</title>
    </head>
    <body>
        <div class="container">
            <h2 class="text-muted">Registration form</h2>
            <div>
                <form name="myForm" action="RegistrationServlet.do" method="POST" novalidate>
                    First name:<input type="text" class="form-control input-sm" name="uname" ng-pattern="/^[a-zA-Z]{3,20}/" ng-model="uname" placeholder="First Name" required/>

                    Password:<input type="password" class="form-control input-sm glyphicon glyphicon-ok" name="pwd" ng-model="pwd" required />

                    Confirm Password: <input type="password" class="form-control input-sm glyphicon glyphicon-ok" name="pwd2" ng-model="pwd2" value-matches="pwd" required/>
                    <span class="help-block" style="color:red" ng-show="myForm.pwd2.$dirty && myForm.pwd2.$invalid">Passwords did not match<br></span><br>
                </form>
            </div>
        </div>            
    </body>
</html>

http://plnkr.co/edit/zCxRp71SICuYp1JDm3pY?p=preview

【问题讨论】：

标签： angularjs

【解决方案1】：

在脚本里面，这三行是什么意思：

var originalModel = $parse(attrs.valueMatches),
响应：这是采用<input type="password" class="form-control input-sm glyphicon glyphicon-ok" name="pwd2" ng-model="pwd2" value-matches="pwd" required/> 中value-matches="pwd" 的值
secondModel = $parse(attrs.ngModel);
响应：这是在同一个<input type="password" class="form-control input-sm glyphicon glyphicon-ok" name="pwd2" ng-model="pwd2" value-matches="pwd" required/> 中取ng-model 的值。 指令中的所有 ngModel 和 attrs 都是本地的
ngModel.$setValidity(attrs.name, newValue === secondModel(scope));
响应：这个观察者正在检查attrs.valueMatches的newVal，然后设置有效性任何与attrs.name 同名的表单控件（在这种情况下基本上是在验证自身，因为它是指令中唯一的表单控件）。有效性由ng-model 中的ng-model 和value-matches 之间的布尔比较来确定<input type="password" class="form-control input-sm glyphicon glyphicon-ok" name="pwd2" ng-model="pwd2" value-matches="pwd" required/>

attrs.ngModel 表示它在谈论 ngModel 控制器或指令？
响应： 同上，指令用于创建隔离范围，因此除非指令中包含每个控制器东西将被本地包含在指令中。

还有 attrs.ngModel 是在获取第一个输入字段的属性还是确认密码输入字段？
响应： 再说一遍，它是本地的，这意味着它只拉取 ng-model 的包含属性value-matches 的元素。指令从 valueMessages => value-messages 在视图中翻译

attrs.name - 我在代码中没有看到任何名称属性？
响应： <input type="password" class="form-control input-sm glyphicon glyphicon-ok" name="pwd2" ng-model="pwd2" value-matches="pwd" required/> 中的 name="pwd2" 是 attrs.name。

我希望这对你有帮助。指令起初可能会非常混乱，但请坚持下去！它们也非常有用，您会逐渐爱上它们...及时。

【讨论】：

我不明白你说“指令中的所有 ngModel 和 attrs 都是本地的”
attrs.name 这里是验证者的名字对吧？所以我可以给任何名字而不是attrs.name?
我所说的 local 是指哪个元素（在这种情况下，<input> 是用指令定义的（在这种情况下，使用属性 value-matches= 会生成一个新的独立范围）它引用的唯一 ngModel 是与自身关联的。您需要 require:ngModel 直接输入的原因是，您可以继承与 ngModel 关联的所有角度功能。
attrs.name 这里是输入的name= 标识符。您熟悉命名表单和表单输入吗？您不能提供任何名称来代替 attrs.name，您可以使用任何名称（name="email" 或 name=special）来标识输入。

【解决方案2】：

require:ngModel 表示这个自定义指令在这里依赖于另一个指令ng-model。

通常，一个指令的链接函数只需要三个参数，范围、元素和属性，顺序相同。当你指定一个 require 属性时，指令接受第四个参数，即 required 指令的控制器。所以，你收到了ngModelController' here inngModel`的指令。

var originalModel = $parse(attrs.valueMatches)

这里，我们正在检索第一个输入框的原始模型或 ng-model 值并将其存储在 originalModel 中。

secondModel = $parse(attrs.ngModel);

同样，我们在这里检索第二个模型的值并存储在secondModel

attrs.ngModel代表值pwd2，它将存储用户在确认密码输入框中输入的值。并且使用$parse，我们正在从控制器范围中检索这个值。

现在，稍后，我们将$watch 放在两个变量上，以监控两个值的变化。

任何给定时间的输入都可以有闲置状态。

$pristine -> 输入未被触摸。

$dirty -> 用户已更改输入。

$valid -> 输入包含有效值。

$invalid -> 输入包含无效值。

用这一行：

ngModel.$setValidity(attrs.name, newValue === secondModel(scope));

我们正在根据这两个 ng-model 值的相等性有效地设置验证状态（$valid 或 $invalid）。

如果两者相同，则结果为真 -> $valid

如果结果为假 -> $invalid

【讨论】：

有些人称第四个属性为differy 例如：link: function (scope, elm, attrs, ctrl) 或者可能是link: function (scope, elm, attrs, model)。我们如何称呼控制器并不重要？如果我们使用不同的名称，我们怎么知道我们是否在调用控制器