How to detect form changes.

[andrew-hwahin]

I have a form which the inputs are prepopulated with data, how do I detect whether a user has already changed the input values or not?

What I wanted to achieve is that I want to disable the submit button if a user has not changed any input values of the form, while enable the submit button if a user has changed the form values.

Any advice would be much appreciated🙏

[bluebill1049]

https://react-hook-form.com/api#formState dirtyFields, dirty

[imjordanxd]

formState.isDirty seems to be true if the field was focused despite not changing the value. Is there a work around for this?

[bluebill1049]

this is not possible, you are probably missing defaultValues at useForm

[aftabnack1]

@bluebill1049 is there a way to get changedFields not exactly dirtyFields.
If I am editing the value and changing it back to it's original value, it is still treated a dirtyFields.

PS: I am using useController, is there a way I can update the value of isDirty to behave like indicator for changed (different from old)??

[uttampun44]

after adding this working fine for me defaultValues at useForm

[afilp]

Hello, I have a different need that requires constant watching of a field value (array entries) in order to change another field value (another array). I want to populate the 2nd array based on the 1st array, i.e. if I add a 3rd item in 1st array I want to setValue a 3rd item on the 2nd array, the same if I remove one, etc. To have a 1-to-1 relationship on the length to the 2nd array.

The isDirty will not do this because I will not be able to detect the additions of entries in the 1st array but just that "things have changed sometime".

How can we do this?

[iam7seven7]

As mentioned by @AM-77, you can use watch.

// firstArrayObserver will carry the latest firstArray value
const firstArrayObserver = watch('firstArray');

useEffect(() => {
  const secondArray = getValue('secondArray');
  setValue('secondArray', [
    ...secondArray.slice(0, -1),
    ...firstArrayObserver.slice(-1),
  ]);
}, [firstArrayObserver, getValue, setValue]);

[kewo22]

const watchAllFields = watch() // when pass nothing as argument, you are watching everything

https://react-hook-form.com/docs/usewatch

[obouchari]

This throws an error TypeError: Cannot read properties of null (reading 'control')

[wolfcarves]

once the value is changed, isDirty will always be true because it tracks the previous defaultValues not the updated one.

[RichardOro01]

import { isEqual } from "lodash";

const { formState, getValues } = useFormContext();
console.log(isEqual(formState.defaultValues, getValues())));

[httpete]

I had good luck with this approach:

  const { trigger, handleSubmit, watch, getValues } = methods;
  const allWatchedFormValues = watch();

  useEffect(() => {
    // Trigger revalidation so any form content changes will trigger a revalidation
    if (!isEqual(getValues(), allWatchedFormValues)) {
      void trigger();
    }
  }, [allWatchedFormValues, trigger, getValues]);

[marko-hologram]

You can tell RHF to validate all the time https://react-hook-form.com/docs/useform#mode

const methods = useForm({
  mode: "all",
});