CODEWITHSUNDEEP
javascriptangularjsformsvalidation
esafwan
esafwan

Reputation: 18029

Hide a form after validation in AngularJs

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:

  1. Validate the form.
  2. 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');      
       });          
};

Upvotes: 0

Views: 1979

Answers (2)

Mick Cullen
Mick Cullen

Reputation: 9454

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>

Upvotes: 1

user4100003
user4100003

Reputation:

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

Upvotes: 2

Related Questions