angular - 在指令中动态更改表单元素之间的验证要求

Question

我有一个包含许多表单输入的表单.所有表单输入都在指令中.

我有一些场景,我需要一个元素的状态来影响其他表单元素的属性,如ng-required.

我很难弄清楚如何在其他表单元素中更新ng-required字段/ $ valid - 它们保持$ valid = false状态 - 我想动态地将ng-required值更改为false它们不再需要,元素变得有效.

在plnkr下面的场景中,如果在第一个Title元素中键入文本,则不再需要第二个元素Title2,但它仍保留在$ valid = false.

我已经尝试使用传递给指令的函数,如下所示,但它似乎没有更新表单元素的有效性...

Plnkr!http://plnkr.co/edit/gCpB7dvBjiOisocjJNlz?p=preview

$scope.toggleRequired = function(content, contentFragment){
    if (contentFragment.name =='title' && angular.isDefined(contentFragment.value) && contentFragment.value.length){
      $scope.content.title2.required=false;      
      content.title2.required=false;      
    }else if (contentFragment.name =='title' && !angular.isDefined(contentFragment.value)){
      $scope.content.title2.required=true;      
      content.title2.required=true;      
    }
  }

Answer 1

在ng-required实际上接受一个表达式,所以没有必要添加{{ .. }}周围的变量,否则表达式将在编译时只计算一次.

在textFormElement.html模板中,更改此行:

ng-required="{{contentFragment.required}}"

对此:

ng-required="contentFragment.required"

Plunker: http ://plnkr.co/edit/YLInikMU5Dl2hIpHPauy？p =preview

希望这可以帮助.