[Feature]: dirtyFields & isDirty

[guvenakcoban]

What is the new or updated feature that you are suggesting?

dirtyFields and isDirty states like react-hook-form

Why should this feature be included?

It would be really useful If we can get isDirty state to use disabling submit button and/or we can post only dirty fields.

[airjp73]

This is something I want to add, but not sure I can promise a timeline right now.

[ThomiReynoso]

It would be really useful to have this! I'm aware too!

[alexbu92]

Seconding this, it's necessary to know if the form is dirty to show reset button when dirty and disable submit button when not dirty.

[hauptrolle]

Would be awesome to have this!

It would be very useful for building an You have unsaved changes dialog when having a dirty form on a route change.

[airjp73]

Not sure how much time I have to implement this, so I want to leave a workaround for anyone struggling with this.

You can handle most use-cases for this to some degree without an explicit dirtyFields state. You can add listen to change events for the whole form by adding a single change listener higher in the DOM. Here's an example:

const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
return (
  <ValidatedForm validator={validator} onChange={() => setHasUnsavedChanges(true)}>
    {/* etc */}
  </ValidatedForm>
)

If you have inputs outside the form itself, you could attach the onChange to any element like a div.

const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
return (
  <div onChange={() => setHasUnsavedChanges(true)}>
    <ValidatedForm validator={validator}>
      {/* etc */}
    </ValidatedForm>
  </div>
)

This won't handle 100% of cases, like if you have a custom component that only works through useControlField, but it should work for most people.