Issue when submitting form with Remix + shadcn/ui + react-hook-form

Question

OBS: I decided to open a answered question here because I have seen so many posts in Reddit and Github about submitting a form with shadcnui/react-hook-form in a Remix app.

I had an issue building a form with Remix and shadcn/ui (which uses react-hook-form) and I just solved it after hours.

To build the form, I followed these pages:

The problem was happening when I was submitting the form, not receiving any logs that I put in some sections of my code.

I checked other cases and tried some things to resolve it:

changing form onSubmit attribute to various structures
verified if some fields were not "registered" in form (I added the UI components, that are registered by itself)
verified any validation errors that could not be showed in screen.
added field values (from render attribute in my Switch component from shadcn, like that:

<Switch
  checked={field.value}
  onCheckedChange={field.onChange}
  name={field.name}
  ref={field.ref}
  disabled={field.disabled}
  onBlur={field.onBlur}
/>

valdinei · Accepted Answer · 2024-07-28 18:49:28Z

To resolve my problem, I changed the onSubmit of my Form element:

        <Form
          id="settings-form"
          onSubmit={
            form.handleSubmit((data) => {
              submit(data, { method: 'post', encType: 'application/json' });
            }, (errors) => console.error(errors))
          }
        >

I also needed to change the action function, getting the object instead of FormData: await request.json().

At first, I tried to get as FormData using:

submit({ myKey: "myValue" }, { method: "post" }); (docs page says that will be serialized as FormData)
multipart/form-data and application/x-www-form-urlencoded as encType, but I always got an empty FormData in action function.

To be honest, I did not understand why some solutions didn't work. That's how I solved it, but maybe there is a better approach, like the remix-hook-form package that I didn't want to use for particular reasons (but it looks nice).

Collectives™ on Stack Overflow

Issue when submitting form with Remix + shadcn/ui + react-hook-form

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related