How can I can call a API Or custom function instead of using default form actions

[CreativeManix]

I wanted to call the API instead of using default form post or get method.

 const [form, { versionNumbers }] = useForm({
    onValidate({ formData }) {
      return parse(formData, { schema });
    },
    onSubmit(event, context: any) {
      //Call API using context data

      event.preventDefault(); //Problem here
    },
  });

The above code works, however if the form has any validation erros previously and input is updated with proper value, the submit works. But the previous error message is still shown, that may be due to the event.preventDefault().

Is there a any proper way to do custom submission?

[edmundhung]

Can you share a bit more on your setup? Are you running on Remix and how you are gonna call the API? (e.g. are you using remix fetcher or a raw fetch).

In general, we expect the lastSubmission to be updated after an API is called. If your API returns a submission object, you can set it to a state and then pass it back to the useForm hook.

[jarimustonen]

I have a same problem but I was not quite able to follow your instructions. Here's the case that I have: We would like to have signup form on multiple pages so basically we would have a api.signup.tsx with corresponding action defined. The Signup.tsx component needs to be able to POST the signup request.

If the request is OK, we will redirect the user to thank you page.

If not, we will return submission.reply.

My question is, how can we then proceed to implement the Signup component?

To illustrate the problem, here's a modified starting point build from the tutorial example:

The component:

import { getFormProps, getInputProps, getTextareaProps, useForm } from '@conform-to/react';
import { getZodConstraint, parseWithZod } from '@conform-to/zod';
import { Form, useActionData, useFetcher } from '@remix-run/react';
import { action, exampleSchema } from './api.example';

export default function ContactUs() {
    const fetcher = useFetcher();

    const handleSubmit = async (event: any) => {
        event.preventDefault();
        const formData = new FormData(event.target);
        fetcher.submit(formData, { method: "post", action: "/api/signup" });
        console.log('submitted');
    };

    const lastResult = useActionData<typeof action>();
    const [form, fields] = useForm({
        lastResult,
        constraint: getZodConstraint(exampleSchema),
        shouldValidate: 'onBlur',
        shouldRevalidate: 'onInput',
        onValidate({ formData }) {
            return parseWithZod(formData, { schema: exampleSchema });
        },
        onSubmit: handleSubmit,
    });

    return (
        <Form method="post" {...getFormProps(form)}>
            <div>
                <label htmlFor={fields.email.id}>Email</label>
                <input {...getInputProps(fields.email, { type: 'email' })} />
                <div id={fields.email.errorId}>{fields.email.errors}</div>
            </div>
            <div>
                <label htmlFor={fields.message.id}>Message</label>
                <textarea {...getTextareaProps(fields.message)} />
                <div id={fields.message.errorId}>{fields.message.errors}</div>
            </div>
            <button>Send</button>
        </Form>
    );
}

The action:

import { parseWithZod } from "@conform-to/zod";
import { ActionFunctionArgs, redirect } from "@remix-run/node";
import { z } from "zod";

export const exampleSchema = z.object({
    email: z
        .string({ required_error: 'Email is required' })
        .email('Email is invalid'),
    message: z
        .string({ required_error: 'Message is required' })
        .min(10, 'Message is too short')
        .max(100, 'Message is too long'),
});

export async function action({ request }: ActionFunctionArgs) {
    const formData = await request.formData();
    const submission = parseWithZod(formData, { schema: exampleSchema });

    if (submission.status !== 'success') {
        return submission.reply();
    }

    const success = false;

    if (success) {
        return redirect('/thank-you');
    } else {
        return submission.reply({
            formErrors: ['Failed to send the message. Please try again later.'],
        });
    }
}

So how can we do this?

[edmundhung]

You will need to use fetcher.data instead of useActionData(). You can find a fetcher example here: https://github.com/edmundhung/conform/blob/main/examples/remix/app/routes/login-fetcher.tsx

[jarimustonen]

Thank you!