Проверка формы с вкладками: переход на первую недействительную вкладку

Question

это вопрос к вопросу Validation in a form with tabs using nested ng-forms.

В этом 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.

Директива прослушивает клики по кнопке отправки, и мы используем объект 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

Если вы хотите получить более глубокую форму угловой, я рекомендую this tutorial.