Question

我慢慢地进入角度。此时我有几个步骤的表单，每个步骤都是由ng-form组成的，因为每个步骤都包含“continue”按钮和公共标题我有以下循环

    <section ng-from="form12.{{step.id}}" ng-repeat="step in steps" id="{{step.id}}" ng-class="{active: currentSection == $index}">
        <h1 class="header">{{$index + 1}}. {{step.title}}</h1>
        <div class="content">
            <ng-include src="step.template"></ng-include>
        </div>

        <!--and button code-->
        <div class="content-body" ng-show="currentSection == $index">
            <button ng-show="$index != 0" class="btn prev" ng-click="prevSection()">Previous</button>

            <button class="btn next" ng-click="nextSection()" ng-disabled="step{{$index+1}}.$invalid">{{isLastStep($index)}}</button>
            <div style="clear: both;"> </div>
        </div>
    </section>

因此，我不会为每个ng-form重复相同的按钮代码。

在此之前我只使用ng-include而且部分是硬编码的，我想我现在缺少$ scope，因为ng-include创建了一个以及ng-repeat，有人可以告诉我如何才能继续按钮取决于每个ng-form验证结果？（如何在最顶层的$ scope中访问每个ng-form结果？）

Answer 1

每个按钮都可以访问该表单的$ error，因此您可以使用此示例：

<button class="btn next" ng-click="nextSection()" ng-disabled="form12.{{step.id}}.$invalid">

你的ng-form拼写错误（ng-from），虽然我认为这是你粘贴/输入的神器。

Answer 2

如果要在其中一个表单无效时禁用按钮

如何在最顶层的$ scope中访问每个ng-form结果？

如果ng-repeat中的任何子表单无效，您可以将ng-repeat包含在ng-form中，并且top ng-form将无效。

或者，如果您不想阻止每个表单按钮

   <button class="btn next" ng-click="nextSection()" ng-disabled="form12.{{step.id}}.$invalid">{{isLastStep($index)}}</button>

角度动态生成表单验证

2 个答案: