0

Here I applied angularjs form validations for a form which is in a bootstrap model.But what the issue is ,the error messages and the dat in text fields remain same even after closing the model`

<div class="modal fade loginpopup index" id="login-modal"   tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
         <div class="modal-dialog login-form animated">
             <div class="modal-content">
                  <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">×</button>
                 </div>
                 <div class="modal-body">
                      <form  name="loginform">
                          <div id="my-tab-content" class="tab-content">
                                <div class="tab-pane active" id="login" name="login">
                                    <div class="form-group" >
                                         <input type="email" id="userName" name="userName" class="form-control" ng-model="email" placeholder="UserName" required >
                                         <span class="has-error" ng-show="loginform.userName.$touched && loginform.userName.$invalid" class="font-ten">
                                                <span class="has-error"   ng-show="loginform.userName.$error.email" class="font-ten">Invalid  email address.</span>
                                                <span class="has-error" ng-show="loginform.userName.$error.required" class="font-ten">UserName is required..</span>


                                            </span>
                                    </div>
                                    <div class="form-group">
                                        <input type="password" id="psd" name="psd" class="form-control" placeholder="Password"   required >
                                    </div>
                                    <div class="form-group text-center" >
                                            <button class="btn btn3d text-center imm" type="submit" > Log In     </button>
                                    </div>
                                    <div class="form-group login-index" style="margin-bottom:0px;padding-top:0px !important">
                                            <input type="checkbox" name="checkbox" id="Option">
                                            <label class="Option" for="Option"> Rememer Me </label>
                                            <a href="/#forgetpassword" data-toggle="tab"  id="forgotpsw">Forgot Password?</a>
                                        </div>
                                </div>

                                <div class="tab-pane" id="forgetpassword">
                                    <div class="form-group " >
                                        <input type="email" id = "emailId" name="emailId" required class="form-control"  placeholder="Email Address" >
                                    </div>
                                    <div class="form-actions text-center">
                                        <button type="button" class="btn btn3d imm"  >Submit </button>
                                    </div>


                             </div>
                           </div>
                      </form>
                 </div>
             </div>
        </div>
     </div>
charan
  • 91
  • 1
  • 11

1 Answers1

1

On closing your bootstrap modal, do this : 

loginform.setPristine();

This will set the form to pristine state i.e it will clear all the validations applied to the form and make it as it was untouched. But you have to clear the input values separately before doing this.

Supradeep
  • 3,246
  • 1
  • 14
  • 28
  • it is not working – charan Nov 25 '16 at 12:25
  • It should work. How are you getting the "loginForm" in your controller ? – Supradeep Nov 25 '16 at 12:27
  • $scope.reset = function() { loginform.setPristine(); } i have written like dis in a controller – charan Nov 25 '16 at 12:30
  • It'll not work like that. Did you define "loginForm" in your controller ? If not, pass the loginForm in the reset() function when you call it on closing the modal. Please try to create a jsfiddle and share that link. – Supradeep Nov 25 '16 at 12:36
  • yes ,I didnt define the loginform in my controller,, here,loginform is form name,right?,, can u make me know how to define it in a controller – charan Nov 25 '16 at 12:40
  • 1
    Post your controller code or it's better create a fiddle with your code and I'll change it there. – Supradeep Nov 25 '16 at 12:44