CODEWITHSUNDEEP
angularjsformsvalidationhide
Prashant Koli
Prashant Koli

Reputation: 41

angularjs form hide unhide triggers validation

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

Upvotes: 1

Views: 1597

Answers (2)

Pankaj Parkar
Pankaj Parkar

Reputation: 136154

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

  1. 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 = {}
  2. 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

Upvotes: 1

jtsnr
jtsnr

Reputation: 1210

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

Upvotes: 0

Related Questions