Question

这是对问题Validation in a form with tabs using nested ng-forms的跟进。

在这个JSFiddle http://jsfiddle.net/gaby/LRfrY/4/中，我们有一个不会提交的表单，除非它的所有子表单都是$valid。如何在用户尝试提交时跳转到第一个无效选项卡？

Answer 1

我认为如果你使用指令会更好，因为你要触及DOM，也因为你可以在一个地方将你需要的所有逻辑组合在一起（当你的应用程序增长时，你会感谢）表格变得更加便携。

我稍微更改了表单，现在只使用一个ngForm，标签是普通的div。表单和它的输入被赋予了名称，因为ngForm指令需要它们来创建formController对象。

该指令正在侦听提交按钮的点击，我们使用formController对象来检查错误并做出相应的反应。

.directive('myForm', function () {
    return {
      restrict: 'A',
      link: function (scope, elm, attrs) {

         var inputs = elm.find('input'), //get all form inputs
             inputTab1 = inputs[0], //asign each input to a var
             inputTab2 = inputs[1],
             submit = inputs[2];

         scope.msg='not submitted';
         scope.tab=1

         //*** ng-form will create a scope var called myForm (myForm is the form's name)

         angular.element(submit).bind('click', function (event) {

              if(scope.myForm.$valid) {
                  //form is valid let it submit
                  scope.$apply(function () {
                    scope.msg = 'submited';
                  });
              }else {
                  //form has erros
                  //event.preventDefault();

                  if(scope.myForm.tab1.$invalid) {
                    scope.$apply(function () {
                        scope.tab = 1;
                        inputTab1.focus();
                    });
                  }else if(scope.myForm.tab2.$invalid) {
                     scope.$apply(function () {
                        scope.tab = 2;
                        inputTab2.focus();
                     });
                  }    
              }
          });
      }
   };
});

以下是fiddle

如果您想深入了解Angular的表格，我建议this tutorial。

Answer 2

我找到了一个简单的解决方案，所以我会发布我的小提琴

http://jsfiddle.net/nicolasmoise/LRfrY/5/

您只需在提交按钮上添加ng-click

请注意，当控制器初始化时，$scope.form1.$valid变量未定义。

使用选项卡进行表单验证：跳转到第一个无效选项卡

2 个答案: