实施指令排除验证隐藏输入元素（$问题的AddControl） [英] implementing a directive to exclude a hidden input element from validation ($addControl issue)

问题描述

我创建一个指令排除验证一个隐藏的输入元素：<一href=\"http://plnkr.co/edit/Vnwvq2AT7JpgTnoQwGh9?p=$p$pview\">http://plnkr.co/edit/Vnwvq2AT7JpgTnoQwGh9?p=$p$pview

I'm creating a directive to exclude a hidden input element from validation: http://plnkr.co/edit/Vnwvq2AT7JpgTnoQwGh9?p=preview

app.directive('shownValidation', function() {
    return {
      require: '^form',
      restrict: 'A',
      link: function(scope, element, attrs,form) {
        var control;

        scope.$watch(attrs.ngShow,function(value){
          if (!control){
            control = form[element.attr("name")];
          }
          if (value == true){
            form.$addControl(control);
          }else{
             form.$removeControl(control);
          }
        });
      }
    };
  });

这里的想法是，如果元件被隐藏，我会从窗体卸下控制，以便它不会影响到其他输入有效性。当我把它工作正常，形式$ removeControl（控制）; ，您可以通过删除名字并点击按钮隐藏的现场试验，在演示

The idea here is if the element is hidden, I will remove the control from the Form so that it will not affect the other input validity. It works fine when I call form.$removeControl(control);, you can test that in the demo by removing the firstname and clicking on the button to hide the field.

但是，当我再次点击该按钮，表格的有效性仍是如此，即使名字是无效的（空）

But when I click the button again, the form validity is still true even though the firstname is invalid (empty)

我也尝试添加形式$ setValidity。（形式为$有效和放大器;与控制$有效。） =>如预期的那样有效状态更新，但是当我键入到姓名，有效期仍然是假的。

I also tried adding form.$setValidity(form.$valid && control.$valid) => the validity state is updated as expected but when I type into the firstname, the validity is still false.

我的问题是如何解决这个问题呢？感谢您的任何答复。

My question is how to solve this problem? Thanks for any replies.

更新

感谢@迈克尔的回答。这里是工作的解决方案：

Thanks to @Michael's answer. Here is the working solution:

app.directive('shownValidation', function() {
  return {
    require: '^form',
    restrict: 'A',
    link: function(scope, element, attrs, form) {
      var control;

      scope.$watch(attrs.ngShow, function(value) {
        if (!control) {
          control = form[element.attr("name")];
        }
        if (value == true) {
          form.$addControl(control);
     //Add a forEach to manually update form validity.Thanks to @Michael's answer
          angular.forEach(control.$error, function(validity, validationToken) {
            form.$setValidity(validationToken, !validity, control);
          });
        } else {
          form.$removeControl(control);
        }
      });
    }
  };
});

工作普拉克

推荐答案

如果控制被删除角度更新有效期（从源）：

If the control is removed angular updates the validity (from the sources):

  form.$removeControl = function(control) {
    if (control.$name && form[control.$name] === control) {
      delete form[control.$name];
    }
    forEach(errors, function(queue, validationToken) {
      form.$setValidity(validationToken, true, control);
    });

    arrayRemove(controls, control);
  };

如果您添加控件角没有更新的有效性（从源）：

If you add the control angular did not update the validity (from the sources):

  form.$addControl = function(control) {
    // Breaking change - before, inputs whose name was "hasOwnProperty" were quietly ignored
    // and not added to the scope.  Now we throw an error.
    assertNotHasOwnProperty(control.$name, 'input');
    controls.push(control);

    if (control.$name) {
      form[control.$name] = control;
    }
  };

所以我们必须手动完成。我想是这样的：

so we have to do this manually. I guess this way:

if (value == true){
    form.$addControl(control); 
    angular.forEach(control.$error, function(validity, validationToken) {
       form.$setValidity(validationToken, !validity, control);
    });
   }else{
    form.$removeControl(control);
   }
}

这篇关于实施指令排除验证隐藏输入元素（$问题的AddControl）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！