Using form html ref can lead to unsync form

[jmunozz]

Hi Thanks for your work ! I noticed that the from html object can be unsync with the react-hook-form object. In my case I use a form field that is passed to the form as a default value but cannot be modified by the user.

  const form = useForm({
    defaultValues: { "someIHiddenId": "1" , "userField1": "", "userField2": ""} ,
    resolver: zodResolver(...),
  });

Then I render 2 form fields

                <FormField
                control={form.control}
                name="userField1"
                render={({ field }) => (
                      <FormItem>
                        <FormLabel>Field 1</FormLabel>
                        <FormControl>
                          <Input
                            {...field}
                          />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                )}
              />

When submitting the form. The html form has no knowledge of the "someIHiddenId" field. This part fails:

      <form
        ref={formRef}
        action={formAction}
        onSubmit={(e) => {
          e.preventDefault();
          form.handleSubmit(() => {
            formAction(new FormData(formRef.current!));
          })(e);
        }}
      >

Instead I rather use the value returned by form.handleSubmit (an object) and convert it to formData.

       <form
        ref={formRef}
        action={formAction}
        onSubmit={(e) => {
          e.preventDefault();
          form.handleSubmit((clientValidatedData) => {
            formAction(objectToFormData(clientValidatedData));
          })(e);
        }}
      >

[diwakersurya]

This is correct. I spent a lot of time tracking the issue why my formdata received on server was always empty object. This fixed the issue. Thanks @jmunozz

[jmunozz]

Hello @diwakersurya Beware. My solution ends up not using the formRef. The action is simply call in the onSubmit callback, not through the action attribute. This does not change a lot, except... There is one downside to that: Some hooks that follows the status of the form through the action attribute are not working: https://fr.react.dev/reference/react-dom/hooks/useFormStatus