Add ability to reset a form to its pristine state

[pkozlowski-opensource]

Sometimes there is a need to reset a form to its pristine state, most notably in the 2 following cases:

1. When a user whants to abandon / reset all the changes done
2. When a user finished editing an item, clicked Save/OK and we want to reuse a form to edit another item.

The bottom line is that there is a need for putting form back into its pristine state.

As advised by Igor Minar creating a new issue, here is a link to the mailing list thread:

http://groups.google.com/group/angular/browse_thread/thread/d69995be8ceea0e2/bb883ad63383baac

Thnx! And huuuuuge thnx for creating angular!

[ghost]

+1

[dshamgin]

hot issue
+1

[wojciechg]

+1

[mbarchein]

+1

[bdunklau]

+1
could really use this

[freewind]

+1

[realdope]

+1

[lgazo]

+1

[stevewillcock]

+1

[zzal]

+1

[zzal]

Meanwhile... If I may suggest a small script:

var form      = $('form#formID'),
    formScope = form.next('span').scope(),
    classes,x,L;

formScope.formName.$error    = {};
formScope.formName.$pristine = true;
formScope.formName.$dirty    = false;
formScope.formName.$valid    = true;
formScope.formName.$invalid  = false;
classes = form.get()[0].classList;
for(x=0, L=classes.length; x<L; x++) {
    if (classes[x] == null) continue;
    if (classes[x].indexOf('ng-') == 0 && classes[x] != 'ng-scope') {
        form.removeClass(classes[x]);
    }
}

[zzal]

Forget the comment above.
My real problem is, not only I have to reset the form to its pristine state, my form may represents different models too, so different UI fields, etc.

So the best solution, in my case, was to destroy the form completely, in the DOM, and start over.
Doing so, I have to call $compile(myForm.contents())(scope); and now the FormController reflect everything OK, with $valid and $invalid parameters set right (that was my problem, not just the $pristine state)

[ajoslin]

Just to note, angular team said this was making it into next version (http://blog.angularjs.org/2012/07/angularjs-10-12-roadmap.html)

[kozmoz]

Great to hear this will be in the next release!

In the mean time, what is the best way to have something similar for the current stable version 1.0.2? Is there a workaround / directive. I prefer a solution without having to touch the original AngularJS sources.

I just figured out I can recompile the HTML part and put it back into the DOM. It works and it's fine for a temporarily solution, but is it safe enough to mess around with the DOM from within the Controller?

http://stackoverflow.com/questions/12603914/reset-form-to-pristine-state-angularjs-1-0-x

[pkozlowski-opensource]

@kozmoz I would say that re-compiling things is a bit "brutal" as you are going to destroy / re-create DOM elements and this is usually "slow". I also can't wait to have it merged since I need to patch each and every subsequent release of AngularJS :-(

[bfricka]

It's sort of crazy this PR hasn't been merged yet. This is a big issue.

[Siyfion]

+1, what's the status on this?

[rbygrave]

Hi, any update on this or "blessed / approved workaround" that avoids recompiling the HTML?

[IgorMinar]

COSED! Alleluia!

[Siyfion]

Fantastic news! 👍

[pkozlowski-opensource]

Opening a champagne now ;)
Thnx Igor, I know that it required a lot of work on your side!

[dgieselaar]

Excellent!

[shaokun]

The other problem is that it doesn't reset the validity when reseting to pristine state.

[danilsomsikov]

Any ETA when this will be available in master?

[pkozlowski-opensource]

@danilsomsikov it landed in master some time ago (last November or something) and was already released as part of 1.1.x branch (https://github.com/pkozlowski-opensource/angular.js/blob/master/CHANGELOG.md#111-pathological-kerning-2012-11-26)

[danilsomsikov]

Sorry, I meant 1.0.x.

[pkozlowski-opensource]

@danilsomsikov I don't think it will land in 1.0.x ever as 1.0.x is reserved for bug fixes only.

[matthewrobertson]

@pkozlowski-opensource I argue not having the ability to reset a form is a bug (in the API)

[ajoslin]

@matthewrobertson it is in version 1.1.1+ :-) https://github.com/angular/angular.js/blob/master/CHANGELOG.md#111-pathological-kerning-2012-11-26

You may view it as a bug, but it is still a feature to add a new function to an API. So it won't be in 1.0.x.

If you want to use 1.1.x versions ... they are considered unstable, but 1.1.4 has been good for me.

[ajbogh]

I've found that this code doesn't reset the $touched and $untouched flags. To do this you would have to call form.$setUntouched() as well as form.$setPristine(). In my opinion $setPristine() should call $setUntouched() itself, but I wanted to make people aware that there's an extra function call that you might need.

[gkalpak]

$pristine/$dirty and $untouched/$touched are independent of each other. For example a form can be $pristine and $touched at the same time (or $dirty and $untouched), so it doesn't really make sense to have $setPristine set both flags.