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

Question

这是对在带有选项卡的窗体中使用嵌套的ng窗体进行验证问题的跟进。

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

Answer 1

嗯，我找到了一个简单的解决办法，所以我会把我的小提琴

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

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

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

Answer 2

我认为最好使用一个指令，因为您将接触DOM，并且您可以将此表单所需的所有逻辑组合在一个地方(当应用程序增长时，您将对此表示感谢)，并且表单也变得更加可移植。

我稍微改变了一下格式，现在它只使用一个ngForm，标签是普通的div。表单及其输入被命名，因为ngForm指令需要它们来创建formController对象。

指令正在监听submit按钮上的单击，我们使用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();
                     });
                  }    
              }
          });
      }
   };
});

这是小提琴

如果你想更深的角度的形式，我建议本教程。