Form validation and form resetting

18,526 views
Skip to first unread message

Raj

unread,
Mar 30, 2012, 4:15:30 PM3/30/12
to AngularJS
How does one reset a form and at the same time reset the form.$invalid
flags? If a user is working on a required field and tabs away from it,
we can user Angular to display an error message. However, if the user
decides to "Reset" the form, the form.$invalid message is still
retained. For the "Reset" functionality I am using the form example
from the form dev guides of Angular.
Thanks in advance,
Raj

Igor Minar

unread,
Mar 30, 2012, 5:38:10 PM3/30/12
to ang...@googlegroups.com
Can you create jsfiddle for this please?

/i


--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.


Raj

unread,
Mar 30, 2012, 6:50:40 PM3/30/12
to AngularJS
Hi Igor,
I am enclosing the fiddle

http://jsfiddle.net/rvauradkar/Me7jH/1/

This is the example from the from dev guide. I had to modify the Reset
and Save buttons as it was not working.
Now it works.But, fill in something in Name and tab to email and tab
out immediately.
Then click on Reset. Notice that the form is still invalid. I need to
make the form pristine again.
Regards,
Raj

Peter Bacon Darwin

unread,
Mar 31, 2012, 8:56:06 AM3/31/12
to ang...@googlegroups.com
This is a good point.  It would be good if the formController had some kind of reset method that at the very least, cleared the form's input controls and returned it to a pristine state.

By the way, I rearranged your fiddle to put the javascript in the javascript window and move the link to angular into a resource: http://jsfiddle.net/Me7jH/2/

Pete

Raj

unread,
Mar 31, 2012, 1:45:44 PM3/31/12
to AngularJS
Peter,
Thanks for the response. The "Advanced Form example from the "docs-
next" documentation solves the problem in a different way.
However, it would still be nice to be able to get the form back in a
pristine form.
Regards,
Raj

On Mar 31, 7:56 am, Peter Bacon Darwin <p...@bacondarwin.com> wrote:
> This is a good point.  It would be good if the formController had some kind
> of reset method that at the very least, cleared the form's input controls
> and returned it to a pristine state.
>
> By the way, I rearranged your fiddle to put the javascript in the
> javascript window and move the link to angular into a resource:http://jsfiddle.net/Me7jH/2/
>
> Pete
>

Peter Bacon Darwin

unread,
Mar 31, 2012, 3:19:01 PM3/31/12
to ang...@googlegroups.com
The "advanced form" example is confusing as it has a form field on the scope, which is not the myForm form element.  It is the FormController attached to myForm by the form directive (so many forms!) that handles the $dirty and $pristine aspects of the form.  You'll find if you look at the elements in this example that running cancel() on the controller, while returning the values to their initial state, does not make the form pristine again.
Pete

Pawel Kozlowski

unread,
Mar 31, 2012, 4:10:59 PM3/31/12
to ang...@googlegroups.com
hi!

On Sat, Mar 31, 2012 at 7:45 PM, Raj <rvaur...@gmail.com> wrote:

> However, it would still be nice to be able to get the form back in a
> pristine form.

+1 for being able to set form back to its pristine state. I'm
struggling exactly with the same problem where I want to have a form
and a list of items displayed. On each form "submition" I would like
to add a new item to a list and turn the form back to its pristine
state.

I can see there there is a $setDirty method on FormController, would
be great to have sth like $setPristine for symetry :-) Unless there is
another, more angular-way of doing things!

Dear angular team - could such a FormController.$setPristine method be
added? Or maybe there is a better approach?

Cheers,
Pawel

Igor Minar

unread,
Apr 4, 2012, 12:34:19 PM4/4/12
to ang...@googlegroups.com
I don't think that reseting individual controls makes much sense in the real world, instead I'd like to see ability to reset a form, which would then reset all of its nested controls.

can someone file an issue for this and link to this thread?

/i

Pawel Kozlowski

unread,
Apr 4, 2012, 1:35:24 PM4/4/12
to ang...@googlegroups.com
Hi!

On Wed, Apr 4, 2012 at 6:34 PM, Igor Minar <ig...@angularjs.org> wrote:
> can someone file an issue for this and link to this thread?

Done: https://github.com/angular/angular.js/issues/856

Cheers,
Pawel

Igor Minar

unread,
Apr 4, 2012, 4:56:48 PM4/4/12
to ang...@googlegroups.com
awesome. thanks!



Cheers,
Pawel

Pawel Kozlowski

unread,
Jul 7, 2012, 1:33:09 PM7/7/12
to ang...@googlegroups.com
Hi!

On Wed, Apr 4, 2012 at 6:34 PM, Igor Minar <ig...@angularjs.org> wrote:
> I don't think that reseting individual controls makes much sense in the real
> world, instead I'd like to see ability to reset a form, which would then
> reset all of its nested controls.

I've just sent a PR with the fix:
https://github.com/angular/angular.js/pull/1127
Not 100% sure if this is a correct fix but seems to work and tests are
passing so let's cross the fingers!

Cheers,
Pawel

Sam

unread,
Oct 22, 2012, 6:40:29 PM10/22/12
to ang...@googlegroups.com


what version of angular will this show up in?. I don't see it in v1.0.2

Matthew Kim

unread,
Feb 14, 2013, 4:42:58 PM2/14/13
to ang...@googlegroups.com
I don't see it in v1.0.4 either, which version is this in?

Pawel Kozlowski

unread,
Feb 14, 2013, 4:44:48 PM2/14/13
to ang...@googlegroups.com
Hi!

It landed in 1.1.1:
https://github.com/angular/angular.js/blob/master/CHANGELOG.md#111-pathological-kerning-2012-11-26

Cheers,
Pawel
> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to angular+u...@googlegroups.com.
>
> To post to this group, send email to ang...@googlegroups.com.
> Visit this group at http://groups.google.com/group/angular?hl=en-US.
> For more options, visit https://groups.google.com/groups/opt_out.
>
>



--
Looking for bootstrap-based widget library for AngularJS?
http://angular-ui.github.com/bootstrap/

Matthew Kim

unread,
Feb 14, 2013, 5:09:22 PM2/14/13
to ang...@googlegroups.com
Ah okay cool, thanks!!
Reply all
Reply to author
Forward
0 new messages