AngularJS - set form pristine without removing validation errors

Question

We have an autosave and an explicit save for a particular form (it's a long form, and we don't want the user to lose data). For an explicit save, invalid data will block the save from occurring and an XHR will not be sent back to the server. However, for the autosave, we want the data to be saved (if possible) regardless of front-end validation.

What we need to have happen is, if the save is successful on the backend, the front-end should mark the form as no longer being dirty. But... and here's the sticker - it should not remove any validation errors/error messages from the form.

From what I'm seeing (or at least from what I understand), .$setPristine() will un-dirty the form, but it will, problematically, also remove validation errors.

Is there a way to un-dirty the form without removing the validation errors so that the autosave doesn't run when it's already performed a save, but so that the user still has the feedback of which fields are invalid so that they can fix the issues?

Thanks!

I'd suggest not to use $pristine for this as it has already a meaning (having nothing to do with autosave). You can create your own attribute and $pristine can be used one day to give the user feedback which fields they've touched. — maaartinus
– maaartinus, Commented Jul 2, 2014 at 17:19

gkalpak · Accepted Answer · 2014-07-01 18:10:31Z

4

A form's $pristine/$dirty states are not connected to the $valid/$invalid states. Your error messages shouldn't be removed (unless you use $pristine/$dirty in the condition that shows/hides the messages).

So, you can call the FormController's $setPristine() method in your autosave function, which will "un-dirty" the form, but will not affect the validation and error messages.

See, also, this short demo.

_{E.g.:

* In the fiddle above, enter something in one field (so it becomes valid and the form becomes dirty).

* The Save button gets enabled.

* Pressing the Save button sets the form's state to $pristine, so the button gets disabled (this simulates the autosave).

* The errors messages are still visible though (and the form's validity state does not change).}

edited Jul 1, 2014 at 18:10

answered Jul 1, 2014 at 17:58

gkalpak

48.2k8 gold badges108 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

gkalpak Over a year ago

?!? What's the downvote for again ?!? (Come on people - at least leave a comment behind...)

zszep Over a year ago

You're absolutely correct. Whoever downvoted you, didn't do a good job. The pristine state and the valid state are not connected in any way and your post should be marked as the accepted answer.

Mr Mikkél Over a year ago

Yes, you were correct ExpertSystem. I was confused by another directive that another developer had attached to the form. Thank you for the fiddle. I upvoted you to counteract the downvote :)

zszep Over a year ago

@ExpertSystem Done with pleasure

Collectives™ on Stack Overflow

AngularJS - set form pristine without removing validation errors

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related