手风琴内的表单验证 angularJS

Question

我有一个有 3 个组的手风琴 (angular-bootstrap)。在第二组中，有一个验证良好的表单（必填字段和电子邮件字段）。

在第三组中有一个摘要，是从表单数据构建的。或者当表单上的某些内容无效时，必须有一个额外的错误消息。

由于指令结构，每个手风琴组都有自己独立的范围。如何在不同的手风琴组（甚至手风琴之外）之间共享 form.$valid（或其他属性）。

这是我的html（缩写）：

<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>

Answer 1

解决方案是在控制器中定义一个新对象，例如

$scope.formObj={}

然后，在该元素中命名您的表单：

name="formObj.frmOffer">

当然，你必须在任何地方都使用那个对象..

<div ng-show="formObj.frmOffer.$valid"></div>

手风琴内的表单验证 angularJS

Form validation inside accordion angularJS

validation

accordion

angularjs

angular-bootstrap