Validation in a form with tabs using nested ng-forms

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.

Answers


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/


Need Your Help

Howto configure jks certificate in webservice client in websphere 5

web-services ssl client websphere jks

I followed different guide in internet googling without solution.

android restful webservice send array of data into php and retrive data in server

php android web-services rest

I want to send array of values from android to php to insert in to MySQL database.Here is my android code.