Angular JS和验证逐步

Question

I have an angular js wizard with steps:

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

and in each of these steps there are input fields and I am looking to validate each step at a time when they click my next button:

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

and here is the click event:

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

I was looking to use jQuery validation and have the required class in each of my input fields, but if I went down that road how would I have it validate one step at a time? Or is there a better way to go about this? I have did some searching on the subject, but I found the examples I found very confusing and complicated...any help would be much appreciated.

THanks.

Answer 1

Angular provides a framework for validating forms ( documentation ) and you can verify based upon $valid (or $invalid ) for each step.

Also note that you can have one parent form, with each step utilizing the ng-form directive to work as a nested form.

I would add the following:

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

If you need to define a new validation, you can follow this excellent article