Validation in a form with tabs using nested ng-forms

Question

I have a form that is divided into tabs. Each tab is an ng-form that is a children of the main form element. The parent form should only be able to submit if the other subforms are valid. However, because I am using ng-switch, it only checks if the current tab is valid.

Here is the fiddle http://jsfiddle.net/nicolasmoise/LRfrY/2/

Is my approach correct? Should try an alternative to ng-switch or can I have all that logic inside the controller/services?

BONUS

When the parent forms submits, it should open the first tab/ng-form that isn't valid in order to immediately show the user the error. (e.g. if tab1 and tab2 are valid it will jump to tab3 and show the error there.

Answer 1

The ng-switch does not hide, it adds/removes elements, that match, to/from the DOM. This way the DOM does not have access to the removed fields so the validation cannot work for the hidden elements.

You could either handle the validation on the controller by checking if all your models have values, or you could just show/hide the elements instead of adding/removing them.

So, remove the ng-switch and use ng-show="tab==1" and ng-show="tab==2" on the ng-form elements.

Demo at http://jsfiddle.net/gaby/LRfrY/4/