Venky559 Venky559 - 11 days ago 8
HTML Question

How to reset the form validations of angularjs after closing the bootstrap modal


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>

Answer

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.

Comments