标签云

微信群

扫码加入我们

WeChat QR Code

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 buttonthis 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 validif (!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()};})


post the code for resetting ?

2019年05月24日44分00秒

is there in the button it self. i have given type="reset".it clears the form but not the error messages

2019年05月24日44分00秒

Try $scope.user = undefined;

2019年05月23日44分00秒

Did you try removing type="reset" ?

2019年05月23日44分00秒

yeah i tried it

2019年05月23日44分00秒

put var original = $scope.user; in out side the reset function

2019年05月23日44分00秒

i put it outside the reset function.still won't work

2019年05月24日44分00秒

CraZyDroiD Try $scope.user = undefined;

2019年05月24日44分00秒

i did. i dont know why but when i click reset button it's doing what my submit button should do. strange

2019年05月23日44分00秒

Don't forget to try $scope.userForm.$setUntouched() / $touched flag that was introduced on angular 1.3!

2019年05月23日44分00秒

the $setUntouched(); was the missing link for me

2019年05月23日44分00秒

Glad I could have helped!

2019年05月24日44分00秒

CraZyDroiD I have update the answer try now and let me know if you got any error in console.

2019年05月24日44分00秒

Very helpful! This also resolved an issue with resetting of ngModel values. Intentionally setting it null and committing it to the ngForm did the trick.

2019年05月24日44分00秒