Ability to add additional formState

[blessanm86]

Is your feature request related to a problem? Please describe. It would be great if we could add additional formState data when creating the form which we could later subsribe to and update with form.reset.

Describe the solution you'd like

const form = useForm({
    ...formProps,
    defaultValues: async function () {
      const data = getPersistedFormData<TFieldValues>(storagePrefix, storageId, maxAge);
      return defaultValues(data?.formValues);
  },
  additionalFormState: {
    isRestored: false
  } // would be great if this also support a function to compute the state
});

Describe alternatives you've considered

Additional context We have a custom abstraction over our forms to handle form persistence and restoration. Our useEnhancedForm allows users to either use the persistedDefaultValues or defaultValues coming from the backend. The whole idea is to allows users to handle unsaved changes.

The issue is about when to remove the persistedDefaultValues from the localStorage. Currently we are returning a clearRestored function from the hook that the user can invoke after saving/discarding the form. So the flow after saving/discarding is -> form.reset(...); clearRestored();

Our initial implementation was the hook internally listened to the isDirty state. And whenever the from went from isDirty to notDirty, we auto cleaned up.

But this will not work when the form is initially setup with persistedDefaultValues as the defaultValues. As now, isDirty is false which make sense. This is where the additional formState like isRestored would help where i can set it based on how the defaultValues were populated and then update its value whenever I invoke form.reset. Now the hook internally can listen to both isDirty, isRestored for auto cleanup

The cleaup code is commend inside the useEnhancedForm hook in the sandbox below

Link to codesandbox with working example of our form