Angular JS: Validate form fields before submit
I suggest to use sub-forms. AngularJS supports putting one form inside another, and validity is propagated form lower form to upper;
Here is example: http://plnkr.co/edit/SruBmlGZZtbwiU8cktAp?p=preview
Here is some code so you can grasp the idea:
<form name='myform' ng-init="step = 1"> <div ng-show="step==1"> <h3>Step 1: Enter some general info</h3> <div ng-form='step1form'> Name: <input ng-model="name" required> </div> <button ng-disabled="!step1form.$valid" ng-click="step = 2">Next</button> </div> <div ng-show="step==2"> <h3>Step 2: Final info</h3> <div ng-form="step2form"> Phone: <input ng-model="phone" required> </div> <button ng-click="step = 1">Prev</button> <button ng-disabled="!myform.$valid" ng-click="submit()">Submit</button> </div> <div> Validation status: <div> Whole form valid? {{myform.$valid}} </div> <div> Step1 valid? {{step1form.$valid}} </div> <div> Step2 valid? {{step2form.$valid}} </div> </div> </form>