密码匹配 angularjs 验证

Question

尝试使用 Angular js 中的自定义指令匹配密码。虽然我看过几个谷歌教程，但我无法让它工作。我创建了一个 Plunker，显示它在 plunker 上不起作用。

HTML：

    <div class="form-group" ng-class="{ 'has-error': form.password.$invalid && !form.username.$pristine }">
        <label for="password">Password</label>
        <input type="password" name="password" id="password" class="form-control" ng-model="user.password" required ng-minlength="6" ng-maxlength="12"/>
    </div>
    <div class="form-group" ng-class="{ 'has-error': form.confirm-password.$invalid && !form.confirm-password.$pristine }">
        <label for="confirm-password">Confirm Password</label>
        <input type="password" name="confirm-password" id="confirm-password" class="form-control" ng-model="user.confirmpwd" required equal="{{user.password}}"/>
        <span ng-show="user.confirmpwd.$error.equal" class="help-block">Password does not match above</span>
    </div>

JAVASCRIPT：

app.directive('equal', [
function() {

var link = function($scope, $element, $attrs, ctrl) {

  var validate = function(viewValue) {
    var comparisonModel = $attrs.equal;
      console.log(viewValue + ':' + comparisonModel);

    if(!viewValue || !comparisonModel){
      // It's valid because we have nothing to compare against
      ctrl.$setValidity('equal', true);
    }

    // It's valid if model is lower than the model we're comparing against
    ctrl.$setValidity('equal', viewValue === comparisonModel );
    return viewValue;
  };

  ctrl.$parsers.unshift(validate);
  ctrl.$formatters.push(validate);

  $attrs.$observe('equal', function(comparisonModel){
        return validate(ctrl.$viewValue);
  });

};

return {
  require: 'ngModel',
  link: link
};
}]);

问题似乎与自定义指令有关，它似乎没有正确绑定到 ngModel 项？我觉得我一定错过了一些简单的东西，我刚刚开始学习 AngularJS。

Answer 1

密码字段绑定应该可以工作，但您正在验证密码字段至少应为 6 个字符长，这意味着只有在您输入 6 个或更多字符后它才会绑定到模型。在那之前它将是undefined，这就是你在我假设的console.log 语句中得到的。

但是还有其他问题。将不会显示错误消息，因为您的字段名称是confirm-password。您应该将其命名为 confirmPassword 或不带破折号的名称。该名称被 Angular 用作对象属性，JavaScript 对象键不能包含破折号。

因此，表单的密码确认部分应如下所示：

<div class="form-group" ng-class="{ 'has-error': form.confirmPassword.$invalid && !form.confirmPassword.$pristine }">
    <label for="confirm-password">Confirm Password</label>
    <input type="password" name="confirmPassword" id="confirm-password" class="form-control" ng-model="user.confirmpwd" required equal="{{user.password}}"/>
    <span ng-show="form.confirmPassword.$error.equal" class="help-block">Password does not match above</span>
</div>