angularjs form hide unhide triggers validation

Question

I've an angularjs form with validations set. I want to unhide it on click of show button and hide it on click of hide button. If I play with the input fields and hide and then again unhide, I still see the validation messages which I don't want. Please help me in solving this issue.

Code is as below: Index.html

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <!-- CSS ===================== -->
    <!-- load bootstrap -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> 
    <style>
        body    { padding-top:30px; }
    </style>

    <!-- JS ===================== -->
    <!-- load angular -->
    <script src="http://code.angularjs.org/1.2.6/angular.js"></script> 
    <script src="script.js"></script>
</head>

<!-- apply angular app and controller to our body -->
<body ng-app="validationApp" ng-controller="mainController">
<div class="container">
<div class="col-sm-8 col-sm-offset-2">

    <!-- PAGE HEADER -->
    <div class="page-header"><h1>AngularJS Form Validation</h1></div>

    <!-- FORM -->
    <!-- pass in the variable if our form is valid or invalid -->
    <button type="button" ng-click="unhide()" class="btn btn-primary">Show</button>
    <form ng-show="showForm" name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate> <!-- novalidate prevents HTML5 validation since we will be validating ourselves -->

        <!-- NAME -->
<div class="form-group">
  <label>Name</label>
  <input type="text" name="name" class="form-control" ng-model="name" required>
  <p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">You name is required.</p>
</div>

<!-- USERNAME -->
<div class="form-group">
  <label>Username</label>
  <input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8">
  <p ng-show="userForm.username.$error.minlength" class="help-block">Username is too short.</p>
  <p ng-show="userForm.username.$error.maxlength" class="help-block">Username is too long.</p>
</div>

<!-- EMAIL -->
<div class="form-group">
  <label>Email</label>
  <input type="email" name="email" class="form-control" ng-model="email">
  <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>
</div>

        <!-- SUBMIT BUTTON -->
        <button type="submit" class="btn btn-primary">Submit</button>
        <button type="button" ng-click="hide()" class="btn btn-primary">Hide</button>

    </form>

</div><!-- col-sm-8 -->
</div><!-- /container -->
</body>
</html>

script.js:

// app.js
// create angular app
var validationApp = angular.module('validationApp', []);

// create angular controller
validationApp.controller('mainController', function($scope) {

  // function to submit the form after all validation has occurred            
  $scope.submitForm = function(isValid) {
alert(isValid);
    // check to make sure the form is completely valid
    if (isValid) {
      alert('our form is amazing');
    }

  };
  $scope.hide = function(){
    $scope.showForm = false;
  }

  $scope.unhide = function(){
    $scope.showForm = true;
    $scope.userForm.$setUntouched();
  }
});

Below is the plunker link: http://plnkr.co/49k8P0

Pankaj Parkar · Accepted Answer · 2015-11-29 11:02:58Z

1

To achieving the behaviour what expect, you need to do several changes in your code.

All the form field should belong to one object, like create one object which would $scope.user = {} and then place all user related fields inside your user object like user.username, user.name and user.email so that while clearing form you could directly do user = {}
While hiding for you need to clear a form object, Here the form object would be the name of the form which userForm.

OR

More simpler solution would be use ng-if instead of ng-show. Which will add and remove DOM on basis of showForm value.

Demo Here

edited Nov 29, 2015 at 11:02

answered Nov 29, 2015 at 10:49

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

Comments

jtsnr · Accepted Answer · 2015-11-29 10:57:00Z

0

If you still want to keep the previously entered data in the fields but only clear the messages then add a variable to scope that is set to true when the form is submitted. The validation messages are only shown when the variable is true. You can then set it to false when you hide. This means that when the form is shown again the messages are hidden.

  $scope.hide = function(){
     $scope.showForm = false;
     $scope.submitted = false;
  }

Plunker: http://plnkr.co/edit/dnBu0mD9RLvLdVJJKBGe

answered Nov 29, 2015 at 10:57

jtsnr

1,22012 silver badges19 bronze badges

2 Comments

Prashant Koli Over a year ago

Hi Pankaj. Thanks for your answer. It helped to solve my issue. :)

Pankaj Parkar Over a year ago

@PrashantKoli its not mine answer..above one is mine..please do check the tick mark to accept the answer,, Thanks :)

Collectives™ on Stack Overflow

angularjs form hide unhide triggers validation

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related