[help] Using remix-hook-form in a component (not a route)

[genox]

Hi,

How would yo go about linking up a form within a modal that is not technically part of any route, thus cannot POST directly?

Is it possible to choose a target route manually that could handle the form submission?

Also, is it possible to fall back to regular client side validation? All my shadcn Form components depend on Remix Hook Form context and it would be nice to have an option for fallback, in case server side handling is not available.

Thanks for any hints!

[AlemTuzlak]

you can pass in a custom fetcher and it will submit to that fetcher instead of the current route, I think that would allow you to submit anywhere?

[DevTGhosh]

hey @AlemTuzlak in a similar vain how would I submit a form that is in a custom component in a route?

[AlemTuzlak]

if it's a custom component submitting to the current route, you don't need anything else other than the hook, otherwise if it's submitting to a different route, again, a custom fetcher will do!

[DevTGhosh]

if it's a custom component submitting to the current route, you don't need anything else other than the hook, otherwise if it's submitting to a different route, again, a custom fetcher will do!

You mean the useRemixForm hook? I am putting that in the custom component as well but that is causing the action on the route to not fire.

Minimal example of what my structure looks like

// File 1 route

export default function RoutePage(){
return (
<CustomForm />
)
}

//custom form component
export default function CustomForm() {
    const remixForm = useRemixForm<zod.infer<typeof schema>>({
        mode: 'onSubmit',
        resolver: resolver,
    })
return (
            <FormProvider {...remixForm}>
                <Form method="POST" onSubmit={remixForm.handleSubmit}>
                       <input name="cost" />
                </Form>
            <FormProvider>
)

[AlemTuzlak]

yes, but the reason it doesn't work in your case is because you're using the <Form element there iwthout the action prop, either set it to the current route or set it in the submitConfig of the hook

[DevTGhosh]

@AlemTuzlak thank you that solved my issue. Great job on the yt videos and this library.

[genox]

@AlemTuzlak Thank you!