Breaking a form between multiple tabs in angular breaks validation - angularjs

Question

I have an angular form spitted between several tabs with angular UI directive.
<form name="campaignForm" class="form-horizontal" novalidate >
<input type="text" name="title" class="input-xxlarge" placeholder="Campaign title" ng-model="campaign.title" required>
<span ng-show="campaignForm.title.$error.required" class="help-inline">
Required</span>
<tabset>
<tab>
</tab>
<input type="email" name="emailFrom" class="input-xsmall" placeholder="From email address" ng-model="campaign.info.emailFrom" required="" />
<span ng-show="campaignForm.emailFrom.$error.required" class="help-inline">
Required</span>
<tab>
<input type="text" name="emailSubject" class="input-xxlarge" ng-model="campaign.info.emailSubject" placeholder="Please enter email subject" required/>
<span ng-show="campaignForm.emailSubject.$error.required" class="help-inline">
Required</span>
</tab>
</tabset>
</form>
Please see my Plunker.
As you can see, only the input outside tabs directive works. The other inputs validation doesn't work because TABS create scopes. Any ideas how to solve this issue?

Answer 1

From the ngForm directive docs:
In Angular, forms can be nested. This means that the outer form is valid when all of the child forms are valid as well. However, browsers do not allow nesting of <form> elements, so Angular provides the ngForm directive, which behaves identically to form but can be nested.
This means that you can break your campaignForm form into sub-forms for each tab:
<form name="campaignForm" class="form-horizontal" novalidate >
<tabset>
<tab heading="first">
<div ng-form="emailForm">
<input type="email" name="emailFrom" class="input-xsmall" placeholder="From email address" ng-model="campaign.info.emailFrom" required />
<span ng-show="emailForm.emailFrom.$dirty && emailForm.emailFrom.$error.required" class="help-inline">
Required
</span>
</div>
</tab>
<tab heading="second">
<div ng-form="subjectForm">
<input type="text" name="emailSubject" class="input-xxlarge" ng-model="campaign.info.emailSubject" placeholder="Please enter email subject" required/>
<span ng-show="subjectForm.emailSubject.$dirty && subjectForm.emailSubject.$error.required" class="help-inline">
Required
</span>
</div>
</tab>
</tabset>
</form>
PLUNKER
This will circumvent the case where tabs directive (or any other directive that uses isolate scope) is breaking your ngFormController's scope.

Answer 2

Although it is old post, but i thought it would help someone
<tabset>
<tab class="nav-item_new_active" id="tab_content_PARAM1" title="{{ctrl.parameter.param_LABEL_1}}" template-url="partials/param/PARAM_1.html"></tab>
<tab class="nav-item_new" ng-id="tab_content_PARAM2" title="{{ctrl.parameter.param_LABEL_2}}" template-url="partials/param/PARAM_2.html"></tab>
</tabset>
I added a nested controllers in PARAM_1.html and PARAM_2.html with form names as
firstForm and secondForm.
In the controller code of firstForm and secondForm i placed a watcher function as below
$scope.$watch('secondForm.$valid', function(newVal) {
//$scope.valid = newVal;
var isPristine = $scope.secondForm.$pristine;
var isDirty = $scope.secondForm.$dirty;
console.log('secondForm Form isDirty'+isDirty);
//console.log('firstForm isPristine '+isPristine);
if($scope.secondForm.$valid==true){
if(isPristine==true){
console.log('secondForm Form is PRISTINE now '+$scope.secondForm.$valid);
//CHECK IF DIRTY IS TRUE HERE
if(isDirty==true){
console.log('secondForm Form is isDirty TRUE NOW>>DECREMENT');
}
} else {
//
isFormValidated = true;
console.log('secondForm IS COMPLETED NOW'+$scope.secondForm.$valid);
$scope.setValidationCount();
}
//console.log('secondForm Form is valid now '+$scope.secondForm.$valid);
} else {
//HERE IS THE PLACE
if(isFormValidated==true){
isFormValidated = false;
console.log('secondForm INVALIDATING FORM NOW');
$scope.decrementValidationCount();
}
}
Above piece of code is placed in nested controller for firstForm and secondForm. This piece can detect if form has been validated or not. It informs main form (myForm).
With this you can control the enable and disable or buttons on main form till all the sub forms are validated successfully.
Note : setValidationCount and decrementValidationCount are two methods in main controller which controls the enabling and disabling of BUTTONS on main form.