Form validation inside accordion angularJS

Question

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>

did you ever solve this? I'm having the same issue with my accordion-heading not including contained inputs in the form — CaffGeek
– CaffGeek, Commented Mar 30, 2015 at 13:54

Roy Calderon · Accepted Answer · 2015-09-16 23:14:14Z

1

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>

answered Sep 16, 2015 at 23:14

Roy Calderon

6,3713 gold badges24 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Form validation inside accordion angularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related