React hook Form know when value is modified

Question

How can we know form is modified or not in react-hook-form. Anyone have idea. I want know if any of the value is changed and update the state edited to true.

After i provide the defaultValue to useForm({defaultValues:values}). I want to notified when the values is updated or changed from defaultValue.

This

Answer 1

Use isDirty property

function YourComponent() {
 const { formState } = useForm();
 const isFormEdited = formState.isDirty;
 ....

Here is the docs reference

Piny

Problem is clicking into a field, not changing anything, and then clicking out of it again already sets this to true. – Markos

works fine for me in react native. – Beetroot

@Adam B: Read the answer of Jimmi – Armijo

also refer this answer for the complete stuff.. https://mcmap.net/q/743446/-react-hook-form-check-for-unsaved-changes – Tetchy

Answer 2

Figured out how to accomplished this. It is important to specify the defaultValues property.

See the isDirty section of formState documentation:

Make sure to provide all inputs' defaultValues at the useForm, so hook form can have a single source of truth to compare whether the form is dirty.

And a short example:

  const {
    formState: {
      isDirty, 
    },
  } = useForm<ProfileFormInterface>({
    defaultValues: {name: 'John Doe', email: '[email protected]'},
  })

isDirty will now only be true if the name or email changes.

Appellative

Answer 3

I faced the same problem, even using isDirty didn't actually help, so I solved it using dirtyFields like this:

if (Object.keys(dirtyFields).length === 0) {
    // Do something when there are no dirty fields
}

Unrequited

This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. To get notified when this question gets new answers, you can follow this question. Once you have enough reputation, you can also add a bounty to draw more attention to this question. - From Review – Lewin

Answer 4

For your usecase, you can use isDirty property provided by react-hook-form. But to use it, you must have some defaultValues for the fields.

You can see the following example which is mentioned in the documentation itself,

const {
  formState: { isDirty },
  setValue,
} = useForm({ defaultValues: { test: "" } });


// isDirty: true
setValue('test', 'change')
 
// isDirty: false because there getValues() === defaultValues
setValue('test', '')

Also, check the if you are providing the defaultValues in correct manner. There might be some issues with values you are using in your code.

useForm({defaultValues:values})

Nock