Skip to content
This repository has been archived by the owner on Apr 12, 2024. It is now read-only.

Add ability to reset a form to its pristine state #856

Closed
pkozlowski-opensource opened this issue Apr 4, 2012 · 31 comments
Closed

Add ability to reset a form to its pristine state #856

pkozlowski-opensource opened this issue Apr 4, 2012 · 31 comments
Labels

Comments

@pkozlowski-opensource
Copy link
Member

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
Copy link

ghost commented Jun 25, 2012

+1

@dshamgin
Copy link

hot issue
+1

@wojciechg
Copy link

+1

1 similar comment
@mbarchein
Copy link

+1

@bdunklau
Copy link

bdunklau commented Jul 7, 2012

+1
could really use this

@freewind
Copy link

freewind commented Jul 7, 2012

+1

@realdope
Copy link

realdope commented Jul 8, 2012

+1

3 similar comments
@lgazo
Copy link

lgazo commented Jul 9, 2012

+1

@stevewillcock
Copy link

+1

@zzal
Copy link

zzal commented Jul 23, 2012

+1

@zzal
Copy link

zzal commented Jul 24, 2012

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
Copy link

zzal commented Jul 28, 2012

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
Copy link
Contributor

ajoslin commented Jul 29, 2012

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
Copy link

kozmoz commented Sep 26, 2012

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
Copy link
Member Author

@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
Copy link

bfricka commented Nov 5, 2012

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

@Siyfion
Copy link

Siyfion commented Nov 16, 2012

+1, what's the status on this?

@rbygrave
Copy link

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

@IgorMinar
Copy link
Contributor

COSED! Alleluia!

@Siyfion
Copy link

Siyfion commented Nov 26, 2012

Fantastic news! 👍

@pkozlowski-opensource
Copy link
Member Author

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

@dgieselaar
Copy link

Excellent!

@shaokun
Copy link

shaokun commented Mar 18, 2013

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

@danilsomsikov
Copy link
Contributor

Any ETA when this will be available in master?

@pkozlowski-opensource
Copy link
Member Author

@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
Copy link
Contributor

Sorry, I meant 1.0.x.

@pkozlowski-opensource
Copy link
Member Author

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

@matthewrobertson
Copy link

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

@ajoslin
Copy link
Contributor

ajoslin commented May 28, 2013

@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
Copy link
Contributor

ajbogh commented Jun 22, 2016

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
Copy link
Member

gkalpak commented Jun 23, 2016

$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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests