密码确认指令答案

【问题标题】：Password Confirmation Directive密码确认指令
【发布时间】：2016-01-09 14:55:57
【问题描述】：

这是我用于指令的代码：

var compareTo = function() {
return {
  require: "ngModel",
  scope: {
    otherModelValue: "=compareTo"
  },
  link: function(scope, element, attributes, ngModel) {

    ngModel.$validators.compareTo = function(modelValue) {
        console.log(modelValue + ":" + scope.otherModelValue);
      return modelValue == scope.otherModelValue;
    };

    scope.$watch("otherModelValue", function() {
      ngModel.$validate();
    });
  }
  };
};
app.directive("compareTo", compareTo);

这是我的html：

       <div class="form-group">
            <label>Password</label>
            <span>Must contain at least eight characters, including uppercase, lowercase letters and numbers</span>
            <input type="password" 
                class="form-control"
                name="password"
                ng-model="signUpPass1"
                ng-pattern="/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})/"
                required>
            <div ng-messages="signUpForm.password.$error" class="formMsgContainer">
                <span class="formMsg" ng-message="pattern">Passwords Does Not Meet the Criterias!</span>
            </div>
        </div>
        <div class="form-group">
            <label>Confirm Password</label>
            <input type="password"
            class="form-control"
            name="conPass"
            ng-model="signUpPass2"
            compare-to="signUpPass1"
            required>
            <div ng-messages="signUpForm.conPass.$error" class="formMsgContainer">
                <span class="formMsg" ng-message="compareTo">Passwords Do Not Match!</span>
            </div>
        </div>

但是compareTo 指令不起作用。查看我在指令中输入的控制台日志，它打印出 pass2 的字符串和 pass1 的 undefined。如aaaa:undefined。这意味着它们永远不会相等，因此总会有错误。所以scope.otherModelValue这句话肯定有问题，但我似乎无法弄清楚哪里出了问题。

谢谢

【问题讨论】：

标签： angularjs forms angular-directive

【解决方案1】：

试试这个指令。我还没有测试过，所以如果它不起作用，请告诉我。

app.directive("compareTo", function() {
  return {
    require: "ngModel",
    link: function(scope, element, attributes, controller) {
      scope.$watch(attributes.ngModel, function(value) {
        controller.$setValidity('compare', (element.val() === value));
      });
    }
  };
});

然后您可以使用 ng-message 中的“比较”来输出错误。

【讨论】：

我对其进行了测试，似乎 element.val() 和 value 指的是同一件事。当我控制台记录它们时，我在确认字段中输入的任何内容都会打印两次。它会忽略输入到原始密码字段中的内容。
让它工作。显然在控制器中声明范围变量是导致它的原因。我不熟悉复杂的角度，所以我不确定为什么这会导致错误。例如：$scope.signUpPass1 = "";

【解决方案2】：

要创建您自己的检查，请尝试指令use-form-error。它易于使用，可为您节省大量时间。

现场示例jsfiddle

 <form name="ExampleForm">
  <label>Password</label>
  <input ng-model="password" required />
  <br>
   <label>Confirm password</label>
  <input ng-model="confirmPassword" required />
  <div use-form-error="isSame" use-error-expression="password && confirmPassword && password!=confirmPassword" ng-show="ExampleForm.$error.isSame">Passwords Do Not Match!</div>
</form>

【讨论】：