Question

60

Angular JS: Validate form fields before submit

rated 0 times [ 65] [ 5] / answers: 1 / hits: 46179 / 11 Years ago, sun, march 31, 2013, 12:00:00

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 'next' button and moves on to step 2. I have set 'required' validations on some of the fields in step 1, but obviously, they do not get validated when the user clicks the 'next' button...they get validated when the 'submit' button is clicked at the end of step 2.

Is there any way I can tell angular to validate those fields in the form when the 'next' button is clicked?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

laytonlamontm

Add To Favorites

Follow

Total Points: 745

Total Questions: 130

Total Answers: 130

Location: Cambodia

Member since Thu, Oct 7, 2021

3 Years ago

answered 11 Years ago keric · Accepted Answer

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>