angularjs form reset error
Solution 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.
Solution 2
Use the following to reset dirty state
$scope.form.$setPristine();
Use the following to reset to clear validation
$scope.form.$setValidity();
Solution 3
There's API documentation on the FormController.
This allowed me to find that there's other methods to call such as:
$setUntouched()
- which is a function I was using if the user has focused on the field, and then left the field, this clears this feature when you run it.
I created a simple form reset function which you can use too.
// Set the following in your controller for the form/page.
// Allows you to set default form values on fields.
$scope.defaultFormData = { username : 'Bob'}
// Save a copy of the defaultFormData
$scope.resetCopy = angular.copy($scope.defaultFormData);
// Create a method to reset the form back to it's original state.
$scope.resetForm = function() {
// Set the field values back to the original default values
$scope.defaultFormData = angular.copy($scope.resetCopy);
$scope.myForm.$setPristine();
$scope.myForm.$setValidity();
$scope.myForm.$setUntouched();
// in my case I had to call $apply to refresh the page, you may also need this.
$scope.$apply();
}
In your form, this simple setup will allow you to reset the form
<form ng-submit="doSomethingOnSubmit()" name="myForm">
<input type="text" name="username" ng-model="username" ng-required />
<input type="password" name="password" ng-model="password" ng-required />
<button type="button" ng-click="resetForm()">Reset</button>
<button type="submit">Log In</button>
</form>
Solution 4
I had the same problem and used the following code to completely reset the form :
$scope.resetForm = function(){
// reset your model data
$scope.user = ...
// reset all errors
for (var att in $scope.userForm.$error) {
if ($scope.userForm.$error.hasOwnProperty(att)) {
$scope.userForm.$setValidity(att, true);
}
}
// reset validation's state
$scope.userForm.$setPristine(true);
};
Solution 5
I went with...
$scope.form.$setPristine();
$scope.form.$error = {};
Feels hacky... but a lot about angular does.
Besides... this was the only thing that worked.
CraZyDroiD
Updated on August 02, 2022Comments
-
CraZyDroiD almost 2 years
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() }; })