Question

我有一个带有步骤的角度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

Angular JS和逐步验证

1 个答案: