Can i manually set form.formState.isDirty to true?

[samceena]

I need the form to be dirty when a custom component has been interacted with.
The fastest way for me to do that is to set form.formState.isDirty = true.

Is this something i can do? or not recommended based on best practice?
I'm having issues with using setValue to trigger formState.isDirty as true,
setValue does not set it as true until after the third interaction with the component.

[bluebill1049]

not a good idea with that. it's better to let hook set the isDirty flag for you, because it will likely to be reverted back, because we will do a deepEqual with your defaultValues.

[harisali10]

which hook we can use for this . I want my api button to get disable if server throws an error and enable it if user retype any form field

[Moshyfawn]

which hook we can use for this . I want my api button to get disable if server throws an error and enable it if user retype any form field

You can setError on server error and the values will get re-validated on input

[Shaker-Hamdi]

So, how to set the formState to be isDirty = true?
I have a similar case where I'm creating my own Dropzone component, and setting the value with setValue and using trigger("inputName") didn't help. The form still doesn't see the file input as dirty.

I even tried to add a defaultValues to the useForm, but that also didn't help.

[Moshyfawn]

setValue("fieldName", value, { shouldDirty: true })

[Shaker-Hamdi]

setValue("fieldName", value, { shouldDirty: true })

That worked nicely. Thank you 👍

[waleedarshad]

This may help #72 (comment)

[IamSanjayGupta]

Its not working with useformContext().

setValue("fieldName", value, { shouldDirty: true })

[erstefan]

any solutions to this?

[belaszalontai]

Tested workaround for useContext:

• in the code where the isDirty flag of form state is checked (for example Save button's disabled property) the getFieldState("fieldName).isDirty also need to be checked.
• it works, because this code: setValue("fieldName", value, { shouldDirty: true }) definitely sets the isDirty flag of the Value so it is usable in the Context, even if the formState.isDirty is not altered some reason.

[Munaf-Divan]

Is there no way to alter the formState.isDirty value? @belaszalontai

[Omkar-Jawalkar]

Is there a way to set multiple value at once using setValue?

[michalstruck]

if you set an object, it's values will not be set as dirty, as in

// only a will be marked as dirty, b and c will not
  methods.setValue("a", {b: "", c: 0}, {
    shouldDirty: true,
  });
// d will be dirty
  methods.setValue("d", "", {
    shouldDirty: true,
  });
// now b will be dirty
  methods.setValue("a.b",  "", {
    shouldDirty: true,
  });```

[Ankur-Marwaha]

useEffect(() => { setValue(fieldName, value, { shouldDirty: true }); }, [setValue]);

This worked for me

[dbehmoaras]

This needs to be revisited. Tried all of the approaches suggested and it's still not dirtying as expected. I understand the issue with react render cycles and why only fields would be set to dirty, but if a nested field is set to dirty, it does not make sense to me that the form itself is not set to dirty as well.

In our use case, we have a list of objects nested inside an object nested inside of an object. Ie the path would be "field.subfield.[0].anotherSubfield". Manually setting the entire parent chain up to the root does not dirty any of the fields or subfields.

We found a workaround by passing both shouldDirty: true and shouldTouch: true in this unique case to the subfield and all the way up the chain to parent field at the root of the form data object. We are no longer relying on formState.isDirty and instead are scanning the formData manually and treating the union of isDirty and isTouched as our 'dirty' state. We run this scan in the submit handler of our form.

This may be suboptimal but it was the only way we were able to work around what seems to be an inconsistency of what defines a dirty form. I've read the docs over and over and am unable to reconcile the definition there with some of the other discussions / issues raised. Maybe this should be a feature request: expose the ability to mutate formState.isDirty to true via useFormContext. This essentially what we need.