Angular JS: Validate form fields before submit

Question

I\'m building an Angular JS app with a 2-step form. It\'s really just one form, but uses JavaScript to hide the first panel and show the second when the user clicks the \'ne

Answer 1

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:

  

    

      
Step 1: Enter some general info
      

        Name: 
      
      Next
    

    

      
Step 2: Final info
      

          Phone: 
      
      Prev
      Submit
    
    

      Validation status:
      
 Whole form valid? {{myform.$valid}} 
      
 Step1 valid? {{step1form.$valid}} 
      
 Step2 valid? {{step2form.$valid}}