AngularJS - UI Bootstrap Accordion Group - Open Panel With Error

566 Views Asked by At

Hi i have a page with several Accordion Group like code below. After submit i want if is possible open the first accordion-group with the error ( in my code i have 2 accordion group with 2 different input required )

    <uib-accordion class="accordion-bs" id="accordionTest">
    <uib-accordion-group heading="Referente 2" >
        <div class="panel-body">
            <div class="col-xs-6 form-horizontal paddL0">
                <div class="form-group" >
                     <div class="col-xs-7">
                        <input type="text" class="form-control SB-width" name="ref2_nome" ng-model="data.ref2_nome" required>
                        <span ng-if="datiRiferimentiForm.ref2_nome.$invalid && !datiRiferimentiForm.ref2_nome.$pristine" class="help-block help-width">Error</span>
                    </div>
                </div>
            </div>
        </div>
    </uib-accordion-group>
    <uib-accordion-group heading="Referente 2" >
        <div class="panel-body">
            <div class="col-xs-6 form-horizontal paddL0">
                <div class="form-group" >
                     <div class="col-xs-7">
                        <input type="text" class="form-control SB-width" name="ref2_cognome" ng-model="data.ref2_cognome" required>
                        <span ng-if="datiRiferimentiForm.ref2_cognome.$invalid && !datiRiferimentiForm.ref2_cognome.$pristine" class="help-block help-width">Error</span>
                    </div>
                </div>
            </div>
        </div>
    </uib-accordion-group>
</uib-accordion>

Submit

1

There are 1 best solutions below

0
On

This is how I use it in my code: Define a Boolean variable in your controller and use it with is-open property of accordion group. You can modify the value of booleanVariable to true or false as per your requirements in the controller functions.

<accordion-group is-open="booleanVariable">