jquery - 当从 DOM 中删除违规元素时，无效表单不会重新计算其有效性

Question

我在其中一个指令中使用 ctrl.$setValidity 来使表单无效。然而，其他地方有一个方法可以在不同的条件下从 DOM 中删除该元素。当我使用 $setValidity 使表单无效，然后删除有问题的元素时，会发生什么情况:表单仍然无效，而我希望它做的是根据新的输入字段集重新计算其有效性。

请注意，我并不是简单地寻找 ctrl.$setValidity true(表单中的其他输入字段可能有效也可能无效)，我只是希望重新计算表单。

下面是指令代码:

 app.directive('dir', function() {
   return {
      restrict: 'C',
      require: "ngModel",
      link: function(scope, element, attrs, ctrl) {
      someValue = scope.someValue;
      someField = element.find(".some-class");

      monitorField = function(newValue, oldValue){
        console.log("whee");
        scope.someFunction(newValue);
        if(newValue =="Invalidate NOW!"){
        ctrl.$setValidity('someClass', false);      
        } else if (oldValue == "Invalidate NOW!"){
           angular.element(document.querySelector('.some-class')).remove();
        } else {
          ctrl.$setValidity('someClass', true); 
       }
    }  
    scope.$watch("someValue", monitorField, true);
   }
 }
});

其运行于:

   <FORM class="dir" ng-model="someValue">
     <INPUT type="text" class="some-class" ng-model="someValue"/>
     <INPUT type="text" class="some-other-class"/>
   </FORM>

(是的，这是一个有点人为的例子)。

问题重现于此:http://jsfiddle.net/kTuAY/

在我的实际代码中，我根据对象数组填充输入字段，该数组通过 Service 填充，并通过 array.splice 删除元素。 jsfiddle 中给出的示例只是为了简单起见。

另一个有趣的失败条件可以在这个 fiddle 中看到:

http://jsfiddle.net/JACAv/

具体来说，如果其中一个输入依赖于与另一个输入的值不冲突，因此无效，而其他字段值更改后，有效性仍然不正确。

我上类时 fiddle 暂时无法正常工作:

http://jsfiddle.net/yQpHL/

谢谢!

Answer 1

如果可能的话，应该通过删除模型指向的 $scoped 对象的部分来删除链接到模型部分的 DOM 元素。想想基本的 ngRepeat，如果从数组中删除一个项目，它就会从 DOM 中删除一个元素。您的表单应该以同样的方式工作。这将防止这种情况发生。所有验证信息都包含在 $scope... 的模型中，如下所示:例如 $scope.myForm.model.$error.required 。如果删除模型指向的 $scope 属性或数组项(例如 $scope.foo 或 $scope.items.splice(2,1)，Angular将知道(大概在下一个 $digest 期间)删除模型及其验证信息。

如果删除 Controller 或指令中的项目并不重要，但应该将其从 $scope 中删除，然后需要进行摘要以更新 UI 和验证。

我希望这有帮助，因为我觉得我绊倒了我想说的话......