angularjs form reset error

Question

i'm trying to do a form with validations using angularjs and so far i did a good job. But when i commit my reset button all the fields reset except for the error messages i get from my validation part. How can i get rid of all the fields and error messages when i reset my form.

This is how it is when i press my reset button

this is my code

<div class="page-header"><center><h2>Give us your Feedback</h2></center></div>      <!-- pass in the variable if our form is valid or invalid -->     <form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate>          <!-- NAME -->         <div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$dirty }">             <label>Name*</label>             <input type="text" name="name" class="item-input-wrapper form-control" ng-model="user.name"  required>             <p ng-show="userForm.name.$invalid && !userForm.name.$pristine " class="help-block">                 <font color="#009ACD">You name is required.</font>             </p>         </div>           <!-- EMAIL -->         <div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$dirty  }">             <label>Email</label>             <input type="email" name="email" class="item-input-wrapper form-control" ng-model="user.email" required >             <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">                 <font color="#009ACD">Enter a valid email.</font>             </p>         </div>          <!-- USERNAME -->         <div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$dirty }">             <label>Description</label>             <input type="text" name="username" class="item-input-wrapper form-control" ng-model="user.username"  ng-minlength="5" ng-maxlength="60" required>             <font color="white">                 <p ng-show="userForm.username.$error.minlength" class="help-block">                     <font color="#009ACD">Description is too short.</font>                 </p>                 <p ng-show="userForm.username.$error.maxlength" class="help-block">                     <font color="#009ACD">Description is too long.</font>                 </p>             </font>         </div>          <div class="col"style="text-align: center">             <button align="left"class="button button-block button-reset"style="display: inline-block;width:100px;text-align:center "                 type="reset"                 ng-click="reset()" padding-top="true"             >                 Reset             </button>               <button class="button button-block button-positive"  style="display: inline-block;width:100px "                 ng-click="submit()"                 padding-top="true"             >                 Submit             </button>         </div>      </form> </div> 

My controller

.controller('ContactCtrl', function($scope,$state,$ionicPopup, $timeout) {     $scope.showfeedback = function() {         $state.go('app.sfeedback');     };      $scope.submitForm = function(isValid) {         $scope.submitted = true;          // check to make sure the form is completely valid         if (!isValid) {             var alertPopup = $ionicPopup.alert({                 title: 'Invalid data entered!',             });         } else {             var alertPopup = $ionicPopup.alert({                 title: 'Feedback submitted',             });         }     };      $scope.reset = function() {         var original = $scope.user;         $scope.user= angular.copy(original)         $scope.userForm.$setPristine()     }; }) 

Answer 1

var original = $scope.user; 

when resetting :

$scope.user= angular.copy(original); $scope.userForm.$setPristine(); 

remove

type='reset' in  <button> 

here is the Angular Documentation for form controllers.

Answer 2

Use the following to reset dirty state

$scope.form.$setPristine(); 

Use the following to reset to clear validation

$scope.form.$setValidity();