question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Pristine and dirty shouldn't change between wizard pages.

See original GitHub issue

Are you submitting a bug report or a feature request?

Bug report

What is the current behavior?

  1. Fill first and last name (pristine should change to false)
  2. Click next
  3. pristine back to true
  4. Back to previous page
  5. pristine is still true

What is the expected behavior?

pristine and dirty shouldn’t change between wizard pages.

or:

There should be other way, to check state of fields that are not currently in the DOM.

Sandbox Link

https://codesandbox.io/s/wizard-field-state-gfevw?file=/Wizard.js

What’s your environment?

n/a

Other information

I have multi-paged form (without validate on each page) and I want to block submitButton, when nothing has changed.

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:7
  • Comments:9 (1 by maintainers)

github_iconTop GitHub Comments

5reactions
jeremy8883commented, Jun 24, 2020

We ran into a similar situation, where we had some fields inside an accordion. When an accordion item is closed, its child components become unmounted, and therefore many of the Field components in the form become unmounted.

Our app is required to automatically save the form when we leave the page, but only if the form is dirty. To do this, we check the dirty state of the form state. Because the dirty state was getting reset back to false when an accordion item was getting closed, the save was not occurring in these situations when it should have.

Are there any recommendations to work around this issue? The best idea I could come up with was to track the dirty state ourselves. Which is unideal, because now we have two versions of dirty, and we need to ensure that future developers don’t use the wrong value.

4reactions
erikrascommented, Jun 8, 2020

The way the Wizard is implemented it is keeping each page as a separate form, and the combining only the values in the parent component. This solves many problems like forcing validation when hitting “Next”, only marking the fields on the page as touched when validation halts submit, etc.

You could potentially raise the <Form> component up into the parent and then do some sort of conditional validation for each page, but then you’ve got a whole myriad of other problems to deal with.

do you think there’s any chance that something is done about this in the library itself?

No.

Read more comments on GitHub >

github_iconTop Results From Across the Web

difference between pristine/dirty and touched/untouched
$pristine / $dirty tells you whether the user actually changed anything, while $touched / $untouched tells you whether the user has merely ...
Read more >
What's the difference between ng-pristine and ng-dirty in ...
ng-dirty: The ng-dirty class tells that the form has been made dirty (modified ) by the user. It returns true if the user...
Read more >
Form marked as dirty after updating form contents to their ...
Any time I try to store a pristine, or original state, of the model in my scope, I get two-way bindings so that...
Read more >
What a very bad day at work taught me about building Stack ...
I'm the new Director of Public Q&A at Stack Overflow. ... To kick off these changes, we started with the tools that our...
Read more >
defi consulting group
The leader stepped forward. His white robe was less than pristine, smeared with dirty handprints and splotches of tar, but his eyes were...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found