Angular JS和验证一步一步

Question

我有一个带有步骤的 Angular js 向导：

<wizard on-before-step-change="log(event)" on-step-changing="log(event)" on-after-step-change="log(event)" user="user">

<step title="step 1">

</step>

<step title="step 2">

</step>

<step title="step 3">

</step>

</wizard>

在每个步骤中都有输入字段，我希望在他们单击我的下一步按钮时一次验证每个步骤：

<a class="btn btn-default" ng-click="gotoNextStep()" ng-show="showNextButton()">Next</a>

这里是点击事件：

$scope.gotoNextStep = function () {
          //Validation
          toggleSteps($scope.currentStepIndex + 1);
      }

我希望使用 jQuery 验证并在我的每个输入字段中都有所需的类，但如果我沿着这条路走下去，我将如何让它一次验证一个步骤？还是有更好的方法来解决这个问题？我已经对该主题进行了一些搜索，但我发现我发现的示例非常混乱和复杂......任何帮助将不胜感激。

谢谢。

Answer 1

Angular 提供了一个验证表单的框架 (documentation)，您可以根据 $valid（或 $invalid）对每个步骤进行验证。

另请注意，您可以有一个父表单，每个步骤都使用ng-form 指令作为嵌套表单。

我会添加以下内容：

<wizard>
  <step> <!-- step 1 -->
    <div ng-form="step1" name="step1">
      <button ng-disabled="step1.$invalid">Next Step</button>
    </div>
  </step>
</wizard>

如果需要定义新的验证，可以关注this excellent article