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

AngularJS : Form validation while switching tabs having it's own controller

本文关键字：验证 表单 选项 自己的 控制器 AngularJS      更新时间：2023-09-26

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

现在我无法检查表单是否有效，因为标签切换期间，标签DOM是在表单和它的控制器。所以我不能访问formname.$valid的属性。那么我该如何处理这种情况呢?

这是样本柱塞

在plunker示例中，您使用了不同模板的不同形式，并包括使用ng-include。相反，你可以只做一个表单，并在个人模板中只添加所需的form element，而不是单独的表单。对特定选项卡的单击事件使用表单验证，并检查输入是否有效。如果输入无效，则显示错误信息并阻止从当前选项卡切换到下一个选项卡。

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

同时点击第二个控制器中的第二个TAB，调用第一个TAB的控制器并检查表单数据是否设置。如果没有设置，则调用"单击第一页签"功能。我们可以使用以下方式在两个控制器之间进行通信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);
}

你可以这样做:

Step1:在控制器中注入$rootScope服务

Step2:现在创建一个$rootScope变量$rootScope. validform =false;

Step3:现在你可以设置/检查每个控制器

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

Step4: set ng-disable="$root. conf "validForm===false"

您可以使用这个rootScoep变量来进行相应的操作。更重要的是你的结构不正确，使一个形式，也使用ng-repeat制表符生成，需要大量的改进在你的代码

相关文章：