submit a form programmatically

[lhapaipai]

thanks for this extension which is just perfect.
i am stuck on a feature.

i would like the form submission to be done as soon as the user interacts with my form (which will only be composed of checkboxes) and not when the user explicitly clicks the submit button. i saw that we can launch a validation programmatically https://conform.guide/intent-button. but how to launch a submission programmatically?

in this example I would like the form to be transmitted when the user clicks on the checkbox

As a workaround i created a submit button and i fire a click action on the submit button. but i think there is a cleaner method?

import { Form } from "react-router";
import { getFormProps, getInputProps, useForm } from "@conform-to/react";
import { getZodConstraint, parseWithZod } from "@conform-to/zod";
import { useRef } from "react";
import { z } from "zod";

const FormSchema = z.object({
  showLabel: z.boolean().default(false),
});

export async function action() {
  return null;
}

export default function Component() {
  const [form, fields] = useForm({
    constraint: getZodConstraint(FormSchema),
    onValidate({ formData }) {
      return parseWithZod(formData, { schema: FormSchema });
    },
    onSubmit() {
      console.log("onSubmit ok!");
    },
  });

  const submitRef = useRef<HTMLInputElement>(null!);
  return (
    <div className="flex gap-4">
      <Form
        method="post"
        {...getFormProps(form)}
        onChange={(e) => {
          // my workaround
          submitRef.current.click();

          // is there a form.submit ?
        }}
      >
        <input ref={submitRef} type="submit" />

        <input {...getInputProps(fields.showLabel, { type: "checkbox" })} />
      </Form>
    </div>
  );
}

if I use the useSubmit react-router hooks it bypass all the conform validation/submission logic.

conform: v1.2
react-router: v7

Thanks a lot !

[chimame]

If you want to submit the data when it is input, you should control the submit process.

export default function Component() {
  const formRef = useRef<HTMLFormElement>(null)
  const requestSubmit = useRef(false)
  const [form, fields] = useForm({
    constraint: getZodConstraint(FormSchema),
    onValidate({ formData }) {
      return parseWithZod(formData, { schema: FormSchema });
    },
    onSubmit() {
      console.log('onSubmit')

      if (!requestSubmit.current) {
        console.log('cancel submit')
        e.preventDefault()
        return
      }

      requestSubmit.current = false
      console.log('execute submit')
    },
  });

  const submitRef = useRef<HTMLInputElement>(null!);
  return (
    <div className="flex gap-4">
      <Form ref={formRef} method="post" {...getFormProps(form)}>
        <input
          {...getInputProps(fields.showLabel, { type: 'checkbox' })}
          onChange={() => {
            console.log('onChange')
            // request submit
            requestSubmit.current = true
            formRef.current?.requestSubmit()
          }}
        />
      </Form>
    </div>
  );
}

[lhapaipai]

hello @chimame
thank you very much for taking the time to answer, that's exactly what I wanted!!
have a nice day!