Angularjs setValidity 导致modelValue 不更新 [英] Angularjs setValidity causing modelValue to not update

问题描述

我在使用表单时遇到了一些基本问题.这就是我所做的.

I'm having some basic trouble with a form. Here's what I did.

我从这里获取了这个看起来很酷的指令:https://github.com/TheSharpieOne/angular-输入匹配

I snagged this cool looking directive from here: https://github.com/TheSharpieOne/angular-input-match

看起来像这样:

directive('match', function () {
    return {
      require: 'ngModel',
      restrict: 'A',
      scope: {
        match: '='
      },
      link: function(scope, elem, attrs, ngModel) {
        scope.$watch(function() {
          return (ngModel.$pristine && angular.isUndefined(ngModel.$modelValue)) || scope.match === ngModel.$viewValue;
        }, function(currentValue, previousValue) {
          ngModel.$setValidity('match', currentValue);
        });
      }
    };
  });

本质上，该指令监视它附加到的元素的模型值，并将其与匹配属性中的模型值进行比较.

Essentially, this directive watches the element it is attached to's model value, and compares it to the model value in the match attribute.

所以...例如，下面我们正在观察两个密码是否匹配:

So...for example, below we're watching to see if both passwords match:

Password: <input ng-model="password" type="password" />
Confirm: <input ng-model="passwordConfirm" type="password" match="password" />

该指令似乎有效，因为它适当地设置了 ng-valid-match 和 ng-invalid-match.

The directive seems to be working, in that it sets ng-valid-match and ng-invalid-match appropriately.

然而，一旦它被设置为无效，passwordConfirm 模型就再也不会更新了.我已经完成了大量的 console.loggin，查看指令中的 ngModel，这是两个密码匹配时的样子:

However, once it is set to invalid, the passwordConfirm model never gets updated again. I've done a ton of console.loggin, looking at ngModel in the directive, and here is what it looks like when both passwords match:

Constructor {$viewValue: "asdf", $modelValue: undefined, $validators: Object, $parsers: Array[0], $formatters: Array[0]…}
$$debounceViewValueCommit: function (trigger, revalidate) {
$$invalidModelValue: "asdf"
$$lastCommittedViewValue: "asdf"
$$runValidators: function (modelValue, viewValue) {
$$validityState: ValidityState
$$writeModelToScope: function () {
$commitViewValue: function (revalidate) {
$dirty: true
$error: Object
$formatters: Array[0]
$invalid: false
$isEmpty: function (value) {
$modelValue: undefined
$name: "passwordConfirmation"
$parsers: Array[0]
$pristine: false
$render: function () {
$rollbackViewValue: function () {
$setPristine: function () {
$setTouched: function () {
$setUntouched: function () {
$setValidity: function (validationErrorKey, isValid) {
$setViewValue: function (value, trigger, revalidate) {
$touched: true
$untouched: false
$valid: true
$validate: function () {
$validators: Object
$viewChangeListeners: Array[0]
$viewValue: "asdf"
__proto__: Object

注意 $viewValue 是正确的，但 $modelValue 被列为 undefined 并且 $invalidModelValue 仍然有一个值.

Note that the $viewValue is correct, but the $modelValue is listed as undefined and $invalidModelValue still has a value.

这是 html 的样子，同样当两个密码匹配时:

Here's what the html looks like, again when both passwords match:

<input type="password" class="form-control ng-isolate-scope ng-dirty ng-valid-required ng-valid ng-valid-match ng-touched" id="passwordConfirmation" name="passwordConfirmation" placeholder="Confirm your password" ng-model="passwordConfirmation" required="" match="password" style="">

我是不是在某处遗漏了什么?我已经转了几个小时了.

Am I missing something somewhere? I've been running in circles for hours.

推荐答案

看起来使用 $setValidity 可能不适合这里.我发现 this question 提出了一个不同的解决方案，使用 $validators 和 $validate()，这对我很有用.新代码如下所示:

It looks like maybe using $setValidity is not the way to go here. I found this question that proposes a different solution, using $validators and $validate(), and this is working for me great. The new code looks like this:

directive('match', function () {
  return {
    require: 'ngModel',
    restrict: 'A',
    scope: {
      match: '='
    },
    link: function(scope, elem, attrs, ngModel) {
      scope.$watch('match', function(pass){
        ngModel.$validate();
      });
      ngModel.$validators.match = function(modelValue, viewValue){
        var value = modelValue || viewValue;
        var match = scope.match;
        return value === match;
      };
    }
  };
});

这篇关于Angularjs setValidity 导致modelValue 不更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！