AngularJs .$setPristine to reset form
Solution 1
$setPristine() was introduced in the 1.1.x branch of angularjs. You need to use that version rather than 1.0.7 in order for it to work.
See http://plnkr.co/edit/815Bml?p=preview
Solution 2
Had a similar problem, where I had to set the form back to pristine, but also to untouched, since $invalid and $error were both used to show error messages. Only using setPristine() was not enough to clear the error messages.
I solved it by using setPristine() and setUntouched(). (See Angular's documentation: https://docs.angularjs.org/api/ng/type/ngModel.NgModelController)
So, in my controller, I used:
$scope.form.setPristine();
$scope.form.setUntouched();
These two functions reset the complete form to $pristine and back to $untouched, so that all error messages were cleared.
Solution 3
Just for those who want to get $setPristine
without having to upgrade to v1.1.x, here is the function I used to simulate the $setPristine
function. I was reluctant to use the v1.1.5 because one of the AngularUI components I used is no compatible.
var setPristine = function(form) {
if (form.$setPristine) {//only supported from v1.1.x
form.$setPristine();
} else {
/*
*Underscore looping form properties, you can use for loop too like:
*for(var i in form){
* var input = form[i]; ...
*/
_.each(form, function (input) {
if (input.$dirty) {
input.$dirty = false;
}
});
}
};
Note that it ONLY makes $dirty
fields clean and help changing the 'show error' condition like $scope.myForm.myField.$dirty && $scope.myForm.myField.$invalid
.
Other parts of the form object (like the css classes) still need to consider, but this solve my problem: hide error messages.
Solution 4
There is another way to pristine form that is by sending form into the controller. For example:-
In view:-
<form name="myForm" ng-submit="addUser(myForm)" novalidate>
<input type="text" ng-mode="user.name"/>
<span style="color:red" ng-show="myForm.name.$dirty && myForm.name.$invalid">
<span ng-show="myForm.name.$error.required">Name is required.</span>
</span>
<button ng-disabled="myForm.$invalid">Add User</button>
</form>
In Controller:-
$scope.addUser = function(myForm) {
myForm.$setPristine();
};
Solution 5
DavidLn's answer has worked well for me in the past. But it doesn't capture all of setPristine's functionality, which tripped me up this time. Here is a fuller shim:
var form_set_pristine = function(form){
// 2013-12-20 DF TODO: remove this function on Angular 1.1.x+ upgrade
// function is included natively
if(form.$setPristine){
form.$setPristine();
} else {
form.$pristine = true;
form.$dirty = false;
angular.forEach(form, function (input, key) {
if (input.$pristine)
input.$pristine = true;
if (input.$dirty) {
input.$dirty = false;
}
});
}
};
Related videos on Youtube
Comments
-
Pirzada over 1 year
I been struggling to reset form once form is submitted. Someone posted this Here which I want to make it work but no success. Here is my My Code Example.
$scope.form.$setPristine();
is not settingPristine: {{user_form.$pristine}}
to true. See example above. -
Nate Bundy over 10 years@Rashid Angular 1.2 will be the next stable version (whenever it's released). All of the 1.1.x versions are subject to API changes, but you'll have to deal with those same changes when moving from 1.0.x to 1.2.x anyway.
-
javi_swift almost 7 yearsThanks for the info. In my case it was form.$setPristine() and form.$setUntouched().
-
Jacob Stamm over 4 yearsThey should have made a single function available to do a complete reset