How to programatically submit a form in Remix and programatically set errors?

[janhesters]

I have a form and I want to programatically submit it in Remix.

How would I do that?

Usually, you'd use useFetcher (with fetcher.Form and fetcher.submit) or useSubmit.

So my current approach looks kind of like this:

import { useFetcher } from "@remix-run/react"
import { conform, useForm } from "@conform-to/react"

export default function Example() {
  const fetcher = useFetcher()

  const [form, fields] = useForm<{
    email: string
    name: string
  }>()

  useEffect(() => {
    // ... in some condition:
    fetcher.submit({ /* ... */ });
  }, []);

  return (
    <fetcher.Form method="POST" {...form.props}>
      <input {...conform.input(fields.email)} />
      <input {...conform.input(fields.name)} />
      <button type="submit">
        {fetcher.state === "submitting"
          ? "Saving…"
          : "Save"}
      </button>
    </fetcher.Form>
  )
}

Related, how do we programatically set errors? The real useEffect is a little more complicated. I have cases in which I'm checking something async on the client and THEN need to set an error if something goes wrong.

[edmundhung]

Conform does not support setting error outside of onValidate at the moment. But you can adjust the validation logic dynamically:

import { conform, useForm } from "@conform-to/react"

export default function Example() {
  const buttonRef = useRef<HTMLButtonElement>(null);
  const [form, fields] = useForm({
    onValidate({ formData }) {
       // dynamically update the validation logic based on the condition
    },
  })

  useEffect(() => {
    // trigger a submission when ready
    buttonRef.current.click();
  }, []);

  return (
    <Form method="POST" {...form.props}>
      {/* ... */}
      <button ref={buttonRef}>Submit</button>
    </Form>
  )
}

[janhesters]

@edmundhung Thank you for answering and moving my question to the appropriate place!

Hmm, bummer. I would need to set the errors in the useEffect hook and lack access to onValidate. Only hacky solution I found was dispatching an action to the server, that sets the error via what the action returns.

[fredericoo]

You can return errors from your action and grab the errors with something like:

import * as R from "remeda";

const lastSubmissionErrors = lastSubmission?.error ? R.pipe(lastSubmission.error, R.values, R.flatten()) : [];

That'll get you an array of strings with the last submission’s errors, regardless of from the validation or if you’ve returned them from your action or submit event. You can do that without remeda too but this is what I have in my codebase