AngularJS 密码确认 noMatch 有效但表格 $invalid？

Question

我正在使用此代码输入密码并确认密码输入正确匹配

Javascript:

    var app = angular.module('app', []);
app.directive('validPasswordC', function() {
  return {
    require: 'ngModel',
    scope: {

      reference: '=validPasswordC'

    },
    link: function(scope, elm, attrs, ctrl) {
      ctrl.$parsers.unshift(function(viewValue, $scope) {

        var noMatch = viewValue != scope.reference
        ctrl.$setValidity('noMatch', !noMatch)
      });

      scope.$watch("reference", function(value) {;
        ctrl.$setValidity('noMatch', value === ctrl.$viewValue);

      });
    }
  }
});
 app.controller('homeCtrl', function($scope) {
     $scope.submit= function (form) {
        if(form.$valid)
        alert('in');
        else
            alert('out');
    }
    });

HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="homeCtrl">
    <p>Password:{{formData.password}}</p>
    <form name="signupForm" ng-submit="submit(signupForm)">
      <div class="fieldset" ng-class="{'has-error':formData.password.$invalid && !formData.password.$pristine}">
        <label>Password</label>
        <input type="password" id="password" name="password" ng-model="formData.password" ng-minlength="8" ng-maxlength="20" ng-pattern="/(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z])/" placeholder="password" required />

        <p ng-show="signupForm.password.$error.required" class="error">*</p>
        <p ng-show="signupForm.password.$error.minlength" class="error">
          Passwords must be between 8 and 20 characters.</p>
        <p ng-show="signupForm.password.$error.pattern" class="error">
          Must contain one lower &amp; uppercase letter, and one non-alpha character (a number or a symbol.)</p>
      </div>

      <div class="fieldset" ng-class="{'has-error':formData.password_c.$invalid && !formData.password_c.$pristine}">
        <label for="password_c">Confirm Password</label>
        <input type="password" id="password_c" name="password_c" ng-model="formData.password_c" placeholder="confirm password" valid-password-c="formData.password" required />

        <p ng-show="signupForm.password_c.$error.noMatch" class="error">Passwords do not match.</span>
          <p ng-show="signupForm.password_c.$error.required" class="error">*</p>
      </div>
    </form>
  </div>
</div>

代码工作正常，但是当我将表单传递给 ng-submit 函数时，它总是在确认密码字段中说无效。我在控制台中检查此表单仅确认密码字段有 $valid = false 和 $invalid = true 。需要帮助这里出了什么问题。

这是控制台

Answer 1

我不明白你为什么使用 $parsers 而不是 $validators？解析器用于格式化而不是用于验证输入字段！这是我的解决方案：

/**
 * Validator for matching two inputs.
 * The given attribute is the value to match the own modelValue.
 * @example
 *   <input name="passwordConfirm" type="password" ng-model="passwordConf" validate-match="newPassword">
 */
app.directive('validateMatch', function () {
  return {
    require: 'ngModel',
    scope: {
      validateMatch: '='
    },
    link: function(scope, element, attrs, ngModel) {

      scope.$watch('validateMatch', function() {
        ngModel.$validate(); // validate again when match value changes
      });

      ngModel.$validators.match = function(modelValue) {
        if (!modelValue || !scope.validateMatch || ngModel.$error.minlength) {
          return true;
        }
        return modelValue === scope.validateMatch;
      };
    }
  };
});

$error 属性被命名为 match 而不是 noMatch 因为那将是双重否定。

Answer 2

您看到的特定错误是因为您错误地使用了 $parsers，您应该使用 Betty St 的回答中提到的 $validators。

来自 angular 文档 for $Parsers

Returning undefined from a parser means a parse error occurred.

请注意，您取消转移到 $parsers 的函数没有 return，这意味着它 return 未定义，这被解释为解析错误。（与 $error 对象所指示的完全一样）

AngularJS 密码确认 noMatch 有效但表格 $invalid？

AngularJS password confirmation noMatch working but form is $invalid?

javascript

validation

angularjs

angularjs-validation