Implement dirtyFields

[ricardopacheco]

Imagine you have a really large form (we're talking over 100 fields). When editing a form, I only change 1 or 2 fields, for example, and when I submit it, I want to send only those changes to the backend, not all the data.

I used this feature with RHF and Yup, and it proved to be really useful for this specific case (although I had to make adjustments like this. What do you think?

[iSpeakNerd]

it's not really set up to do that, vaidate on client or server and handles the whole form either way. over 100 fields is recommended to break into smaller forms.

form.state.meta checks all fields at once

but i think you'd want to use the transforms to merge form state on submit, i don't think the API is set up to be iterable like that. You'd essentially be saving a copy and needing to compare the new version.

you may be able to hack something with useStore() but it's meant for reactivity in client not data submission

[ricardopacheco]

but i think you'd want to use the transforms to merge form state on submit

You hit the nail on the head. Since it doesn't need to be reactive or constantly recalculated, it would be interesting to have dirtyFields and dirtyValues (it only makes sense on submit; it's done in other events like onBlur or onChange, I don't know, but I'd ignore them in a first version).

I can do this manually, of course, by calculating it manually. My suggestion is that the API make this available ONLY on submit. One feature where this is interesting is for those who need to perform auditing.

[LeCarbonator]

There's some things that should be clarified for dirtyFields. Take this defaultValues for example:

const defaultValues = {
   foo: '',
   bar: 0,
   nested: {
     foo: '',
     bar: 0
   },
   someArray: [
     { foo: "" },
     { bar: 0 }
   ]
}

Here's some assumptions I'd make for changing some of these fields:

1. Editing foo or bar should pass them one to one.
   • React Hook Form utilizes non-persistent dirty (which means that it is false if changedValue === defaultValue. Tanstack Form uses persistent dirty which means that, once touched, it will always take the changed value. What's the expected behaviour for dirtyFields?
2. Editing nested.foo should mark nested.foo as dirty field.
   • What about nested.bar? What if my object is a representation of one compound value, and by dirtying one field I want to dirty all of them?
3. Editing someArray[1].bar should mark that object as dirty field.
   • Should the whole array be considered dirty if one index was changed? What about the elements within the array, as mentioned in point 2?

Let me know your thoughts.

[Grayseon]

I would love to see this come to Form. In my mind, the best use-case for this is for patching something on a database. For that reason, I would think it would be as granular as possible so as to send the least data to the server. A dirtyValues property would be nice to easily get all of the values of the dirty fields in an object.

For example, if bar were changed to 0, nested.foo to baz, and someArray[1].bar to 1, the form's dirtyValues would look like:

{
  // no `bar`, unchanged
  nested: {
    foo: "baz"
  },
  someArray: [
    { bar: 1 }
  ]
}

But to align with Form's persistent dirty, bar would probably end up having to be included in the object.
And of course, dirtyFields would include the field objects of each of the dirty fields.