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 -input匹配

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

从本质上讲，这个指令手表它连接到模型值的元素，并将其与在match属性的模型值。

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-有效匹配和NG-无效匹配恰当。

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被列为不确定和$ 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是不走这里的路。我发现<一个href=\"http://stackoverflow.com/questions/24385104/password-matching-in-angularjs-using-the-validators-pipeline-produces-unexpecte\">this问题是提出了不同的解决方案，使用$验证和$的validate（），这是为我工作很好。新的code是这样的：

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屋！