Question

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

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

以下是示例plunker

Answer 1

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

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

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

Answer 3

您可以这样做：

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

Step2：现在创建一个$ rootScope变量，说$ rootScope.validForm = false;

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

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

第4步：设置ng-disable =＆＃34; $ root.validForm === false＆＃34;在html中

您可以使用此rootScoep变量进行相应的操作。更多结构不正确制作一个表单，也使用ng-repeat生成制表符，需要对代码进行大量改进。

AngularJS：在切换具有它自己的控制器的标签时进行表单验证

3 个答案: