react-final-form icon indicating copy to clipboard operation
react-final-form copied to clipboard

How to get only changed fields?

Open juicylevel opened this issue 6 years ago • 4 comments

feature request

Hello! I use FormSpy to handle form field changes. I need to know which fields have changed. How can i do this?

P.S. dirtyFields do not fit

juicylevel avatar Dec 12 '18 11:12 juicylevel

you can use deep-object-diff package to know which fields changed, diff(initialValues, values)

iskandarovBakshi avatar Jan 21 '19 02:01 iskandarovBakshi

I was also searching about how i could implement this.

I post the solution that i used for any next visitor: Second param that is passed at onSubmit function https://final-form.org/docs/react-final-form/types/FormProps#onsubmit is named form.

You can use form.getState().initialValues and compare them with the first param of onSubmit which is values. The comparison could happen using an external library like deep-object-diff or a custom diff function.

elissaioskon avatar Apr 21 '20 17:04 elissaioskon

@juicylevel I don't know what you mean with "dirtyFields do not fit", but for everyone else: form.getState().dirtyFields gives you the fields that have changed.

steventilator avatar Nov 04 '20 15:11 steventilator

@juicylevel I don't know what you mean with "dirtyFields do not fit", but for everyone else: form.getState().dirtyFields gives you the fields that have changed.

"dirtyFields" doesnt work in multistep forms where each step mount and unmounts, "dirtyFields" resets/forgets step 1 dirtyFields when for example going from step 1 to step 2.

Basovs avatar Feb 13 '23 07:02 Basovs