AngularJS：在切换具有自己的控制器的选项卡时进行表单验证答案

【问题标题】：AngularJS : Form validation while switching tabs having it's own controllerAngularJS：在切换具有自己的控制器的选项卡时进行表单验证
【发布时间】：2015-10-19 09:04:30
【问题描述】：

我创建了选项卡控件，每个选项卡都使用不同的控制器。每个选项卡都有一些输入类型，也有验证。我为每个选项卡使用了表单，并为每个选项卡使用了不同的控制器。当我单击另一个选项卡时，我想验证表单。例如，如果选项卡 1 中有任何无效值，那么当用户单击选项卡 2 时，它应该验证选项卡 1，如果发现任何无效值，那么它应该关注无效字段并且不允许切换选项卡。只有在选项卡中的表单有效时才允许切换选项卡。

现在我无法在选项卡切换期间检查表单是否有效，因为选项卡 DOM 位于表单及其控制器之外。所以我无法访问formname.$valid 属性。那么我该如何处理这种情况呢？

这里是示例plunker

【问题讨论】：

标签： javascript jquery angularjs validation tabs

【解决方案1】：

在 plunker 示例中，您为不同的模板使用了不同的表单，并使用 ng-include 包含在内。相反，您只能制作一个表格，并在单独的模板中只添加所需的form element 而不是单独的表格。在特定选项卡的单击事件上使用表单验证并检查输入是否有效。如果输入无效，则显示错误消息并阻止从当前选项卡切换到下一个选项卡。

注意：不要使用ng-if 来显示或隐藏模板，而是使用ng-show 或ng-hide

【讨论】：

如果我使用 ng-show 或 ng-hide 那么所有选项卡都将在页面的初始加载中呈现，但是通过使用 ng-if 我可以在单击选项卡时加载选项卡内容。在实际情况下，退出大号。每个选项卡中的控件。我可以知道为什么我不应该使用 ng-if 吗？请指教。我在这个问题中问过同样的问题stackoverflow.com/questions/33145644/…
查看我的answer
确实如此。但在我的情况下，一旦选项卡被激活，我将表达式设置为 true，并且不会再次设置为 false。所以我认为没有 dom 被删除的问题。如果我错了，请纠正我。
If i use ng-show or ng-hide then all the tabs will be rendered in the initial load of page, but by using ng-if i can load tabs content on click of tab. In real scenario there exits large no. of controls in each tab. 此处使用 ng-if 删除 DOM 元素是正确的，但这并不意味着它在附加到 DOM 之前已被删除。加载第一个 HTML 页面并在变量绑定到 scope 之后，ng-if 删除了 DOM 元素，所以最好使用 ng-show，因为 ng-if 需要时间来添加和删除 DOM 元素...
好的。那么在这里我的问题需要使用什么方法。 stackoverflow.com/questions/33145644/…

【解决方案2】：

从第二个控制器单击第二个选项卡时，调用第一个选项卡的控制器并检查是否设置了表单数据。如果未设置，请调用第一个选项卡的 ng-click 功能。我们可以使用以下方式在两个控制器之间进行通信\ 1)共享数据服务

   function FirstController(someDataService) 
{
  // use the data service, bind to template...
  // or call methods on someDataService to send a request to server
}

function SecondController(someDataService) 
{
  // has a reference to the same instance of the service
  // so if the service updates state for example, this controller knows about it
}

2)在作用域上发射事件

      function FirstController($scope) 
{
  $scope.$on('someEvent', function(event, args) {});
  // another controller or even directive
}

function SecondController($scope) 
{
  $scope.$emit('someEvent', args);
}

【讨论】：

【解决方案3】：

您可以这样做：

第一步：在控制器中注入$rootScope服务。

第 2 步：现在让 $rootScope 变量说 $rootScope.validForm=false;

第 3 步：现在您可以设置/检查每个控制器

   if(formname.$valid){
   //Your code
   $rootScope.validForm=true;
   }else{
   $rootScope.validForm=false;
   }

第四步：在html中设置ng-disable="$root.validForm===false"

您可以使用这个 rootScoep 变量来进行相应的调整。更何况你的结构不正确，制作一个表格，也使用 ng-repeat 生成标签，需要对你的代码进行大量改进。

【讨论】：