Hide a form after validation in AngularJs

Question

I am working on a angular form and this is my first experience with Angular Form. I am able to submit the form successfully. But I want to do 2 more things:

Validate the form.
Hide the form if valid and show a div with confirmation.

Right now am able to hide the form using ng-click & ng-hide properties of the form. But I want this hiding to happen based on the validation. I am looking to validate email, by min & max length & required.

The form code:

<form id="signup-form" ng-submit="processForm()" ng-hide="showConfirm" >
    <div class="col-md-12"><h4 class="col-md-12" >What do you think?</h4></div>
    <div class="form-group col-md-12">
    <div class="row">
        <div class="radio col-md-6">
            <label>
               <input type="checkbox" ng-model="formData.option1"  >
               Option1
            </label>
        </div>

        <div class="radio col-md-6">
            <label>
                <input type="checkbox" ng-model="formData.option2" >
                Option2
            </label>
        </div>
      </div>    
    </div>
<div class="col-md-12 contact">
    <h4 class="col-md-12" >Want us to contact you?</h4>
    <div class="form-group">
        <div class="textbox col-md-12">
            <label>Name </label>
               <input type="text" ng-model="formData.name" >

        </div>
        <div class="textbox col-md-12">
            <label>Email </label>
               <input type="text" ng-model="formData.email" >

        </div>
         <div class="textbox col-md-12">
            <label>Phone </label>
               <input type="text" ng-model="formData.phone" >

        </div>
    </div>    
    </div>
    <div class="form-group row">
    <div class="col-md-12 ">
         <div class="col-md-12 contact">
            <button type="submit" class="btn btn-primary" ng-click="showConfirm = ! showConfirm">Submit</button>
         </div>
    </div>
    </div>
</form>  
<div class="col-md-12 confirmation" ng-show="showConfirm">
    <h2 >Thanks alot for your feedback.</h1>
</div>

The js code:

$scope.processForm = function() {                            
   $http.post('http://localhost/api/node.json', $scope.formData)
       .success(function(data) {            
           $scope.formData = {};                
           $state.go('main.start');      
       });          
};

score 2 · Accepted Answer · 2014-10-02 17:49:41Z

2

Give your form a name and on ng-submit, check the validity of the form with the $valid property.

<form id="signup-form" name="signUpForm" novalidate ng-submit="signUpForm.$valid && processForm()" ng-hide="showConfirm">

Add validation attributes to your inputs. ex:

<input type="text" ng-model="formData.email" required>

Then once the form is submitted, set the showConfirm property to true

Read more about validation here https://docs.angularjs.org/guide/forms and http://www.ng-newsletter.com/posts/validations.html

edited Oct 2, 2014 at 17:49

answered Oct 2, 2014 at 17:32

user4100003

Sign up to request clarification or add additional context in comments.

Comments

Mick Cullen · Accepted Answer · 2014-10-02 17:51:34Z

1

Something similar to the following should work.

HTML

<form name="signup-form" class="signup-form" novalidate method="post" ng-submit="processForm()" ng-hide="!signup-form.$invalid" ng-show="signup-form.$invalid" >
  <div class="form-group">
    <label>Name</label>
    <input type="text" class="form-control input-lg" name="username" placeholder="Username" ng-model="user.username" ng-required="true">

    <label>Email</label>
    <input type="email" class="form-control input-lg" name="email" placeholder="Email" ng-model="user.email" ng-maxlength="20" ng-minlength="10" ng-required="true">
  </div>
</form>

<div ng-hide="!signup-form.$invalid" ng-show="signup-form.$invalid">
</div>

answered Oct 2, 2014 at 17:51

Mick Cullen

9,4543 gold badges23 silver badges17 bronze badges

Collectives™ on Stack Overflow

Hide a form after validation in AngularJs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related