Javascript AngularJS密码确认正常，但表单无效？

我使用此代码进行密码输入，并确认密码输入是否正确匹配

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:

密码：{{formData.Password}

暗语
*

密码必须介于8到20个字符之间

必须包含一个较低的&；大写字母和一个非字母字符（数字或符号）
确认密码
密码不匹配。
*

代码运行良好，但当我将表单传递给ng submit函数时，它总是在确认密码字段中显示无效。我在console only confirm password字段中检查此表单是否有$valid=false和$invalid=true。需要帮助这里出了什么问题

这是控制台

---

我不明白为什么要使用

$parsers

而不是？解析器用于格式化，而不是验证输入字段！以下是我的解决方案：

/**
 * 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;
      };
    }
  };
});

/**
*用于匹配两个输入的验证器。
*给定的属性是与自己的modelValue匹配的值。
*@example
*   
*/
应用指令（'validateMatch'，函数（）{
返回{
要求：'ngModel'，
范围：{
validateMatch:“=”
},
链接：功能（范围、元素、属性、模型）{
作用域：$watch（'validateMatch'，function（）{
ngModel.$validate（）；//匹配值更改时再次验证
});
ngModel.$validators.match=函数（modelValue）{
如果（！modelValue | | |！scope.validateMatch | | ngModel.$error.minlength）{
返回true；
}
返回modelValue==scope.validateMatch；
};
}
};
});

---

$error

属性被命名为

match

而不是

noMatch

，因为这是双重否定的。

我不明白为什么要使用

$parsers

而不是？解析器用于格式化，而不是验证输入字段！以下是我的解决方案：

/**
 * 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;
      };
    }
  };
});

/**
*用于匹配两个输入的验证器。
*给定的属性是与自己的modelValue匹配的值。
*@example
*   
*/
应用指令（'validateMatch'，函数（）{
返回{
要求：'ngModel'，
范围：{
validateMatch:“=”
},
链接：功能（范围、元素、属性、模型）{
作用域：$watch（'validateMatch'，function（）{
ngModel.$validate（）；//匹配值更改时再次验证
});
ngModel.$validators.match=函数（modelValue）{
如果（！modelValue | | |！scope.validateMatch | | ngModel.$error.minlength）{
返回true；
}
返回modelValue==scope.validateMatch；
};
}
};
});

---

$error

属性被命名为

match

而不是

noMatch

，因为这将是双重否定的。

您看到的具体错误是因为您错误地使用了$parser，您应该使用Betty St的答案中提到的$validator

从角度的文档

从解析器返回undefined表示发生了解析错误

---

请注意，取消移位到$parsers的函数没有返回，这意味着它返回未定义的，这被解释为解析错误。（正如$error对象所指出的）

您看到的具体错误是因为您错误地使用了$parser，您应该使用Betty St的答案中提到的$validator

从角度的文档

从解析器返回undefined表示发生了解析错误

---

---

请注意，取消移位到$parsers的函数没有返回，这意味着它返回未定义的，这被解释为解析错误。（正如$error对象所示）

您看过$error了吗？这应该能准确地告诉你什么是失败的。真的很难理解。你能在问题中补充一下吗？也许有人可以帮助您理解添加了确认密码字段OK的图像，从$error中，我们可以看到parse设置为true。这意味着原因在$parsers函数中。我看到您传入了函数$scope，但随后引用了scope。那是打字错误吗？你看过$error吗？这应该能准确地告诉你什么是失败的。真的很难理解。你能在问题中补充一下吗？也许有人可以帮助您理解添加了确认密码字段OK的图像，从$error中，我们可以看到parse设置为true。这意味着原因在$parsers函数中。我看到您传入了函数$scope，但随后引用了scope。这是一个输入错误吗？

ngModel.$validators.match

函数检查给定模型与实际模型值的相等性。signupForm.passwordConfirm.$error.match这对错误有效。

signupForm.$invalid

或

signupForm.passwordConfirm.$invalid

！我还建议对表单组使用指令（如果您使用引导）@请参阅

ngModel.$validators.match

函数检查给定模型与实际模型值的相等性。signupForm.passwordConfirm.$error.match此函数适用于错误。$invalid或

signupForm.passwordConfirm.$invalid

！我还建议对表单组使用一个指令（如果您使用的是bootstrap）@请参阅Betty St的答案，了解如何使用匹配验证器。它只需要更新到您的特定命名。Betty St的答案详细说明了如何使用匹配验证器。它只需要根据您的特定命名进行更新。