How to use a separate action

[jarimustonen]

I'm trying to build a more complex form where the action is defined in a separate file. The idea is to have a form component that can be embedded on multiple different pages. The corresponding action can return either error messages or, in the case of success, a redirection.

My problem is that when the action is moved to a separate file, the return values do not came back to the form.

Here's an example code.

File api.example.tsx:

import { zodResolver } from '@hookform/resolvers/zod';
import { ActionFunctionArgs, json, redirect } from '@remix-run/node';
import { getValidatedFormData } from 'remix-hook-form';
import { z } from 'zod';

export const newsletterSchema = z.object({
    name: z.string().optional(),
    email: z.string().email(),
});

type NewsletterType = z.infer<typeof newsletterSchema>;

const resolver = zodResolver(newsletterSchema);

const doesEmailExist = (email: string) => {
    return email === 'test@example.fi';
};

export async function action({ request }: ActionFunctionArgs) {
    const { errors, data, receivedValues: defaultValues } =
        await getValidatedFormData<NewsletterType>(request, resolver);
    if (errors) {
        return json({ errors, defaultValues });
    }
    console.log('data', data);
    if (doesEmailExist(data.email)) {
        return json({ errors: { email: 'Email already exists' } }, { status: 400 });
    }

    return redirect('/');
}

File ExampleForm.tsx:

import { zodResolver } from "@hookform/resolvers/zod";
import { Form, useActionData } from '@remix-run/react';
import { useRemixForm } from 'remix-hook-form';
import { z } from "zod";
import { action, newsletterSchema } from "~/routes/api.example";

type NewsletterType = z.infer<typeof newsletterSchema>;
export default function SubscribeNewsletter() {
    const actionData = useActionData<typeof action>();
    const { register, formState } = useRemixForm<NewsletterType>({
        resolver: zodResolver(newsletterSchema),
    });
    const { errors } = formState;
    console.log('formState', formState);
    console.log('actionData', actionData);

    return (
        <Form method="post" action="/api/example" noValidate>
            <div>
                <label htmlFor="name">Name:</label>
                <input id="name" {...register('name')} />
                {errors.name && <p>{errors.name.message}</p>}
            </div>
            <div>
                <label htmlFor="email">Email:</label>
                <input id="email" {...register('email')} />
                {errors.email && <p>{errors.email.message}</p>}
            </div>
            <button type="submit">Subscribe</button>
        </Form>
    );
}

[ibanks42]

Did you ever figure out a way to do this?

[jarimustonen]

Not really. I switched to another library but the solutions was to use Fetcher. The basic idea is that Fetcher is able to make a request without leaving the page.

[constantgillet]

You can add custom action in the useRemixForm submitConfig parameter

const methods = useRemixForm<FormData>({ mode: "onSubmit", resolver, submitConfig: { action: "/api/example", method: "post", navigate: false, }, }) ;

[albert-schilling-enerparc]

I also had to to define the action in the submitConfig instead of the Form component for it to work. There might be a bug or at least an error in the documentation, because there it says:

The following props will be used from Form if no submitConfig is provided:
method
action
encType

What do you think, @AlemTuzlak ?