Reputation: 681
I have an accordion (angular-bootstrap) that has 3 groups. In the second group there's a form that validates well (required and email fields).
In the third group there is a summary, builded from the form-data. Or there must be an additional error-message when something is invalid on the form.
Because of the directive-structure each accordion-group has it's own isolated scope. How can I share the form.$valid (or other properties) between the different accordion-groups (or even outside the accordion).
This is my html (shortened):
<accordion close-others="true" id="checkoutsteps">
<accordion-group is-open="menuStatus[0].isOpen">
[...]
</accordion-group>
<accordion-group is-open="menuStatus[1].isOpen">
<accordion-heading>
<div class="number">2</div>
{{bid.name}}
</accordion-heading>
<div class="step-content">
<form name="frmOffer">[...]</form>
</div>
</accordion-group>
<accordion-group is-open="menuStatus[1].isOpen">
<accordion-heading>
<div class="number">3</div>
Summary
</accordion-heading>
<div class="step-content">
<div ng-show="frmOffer.$valid"></div> <-- THIS DOES NOT WORK
</div>
</accordion-group>
Upvotes: 1
Views: 1462
Reputation: 6371
The solution is to define a new object in your controller something like
$scope.formObj={}
Then, name your form within that element:
name="formObj.frmOffer">
Of course, you'll have to use that object everywhere..
<div ng-show="formObj.frmOffer.$valid"></div>
Upvotes: 1