How to programatically submit a form in Remix and programatically set errors? #251
-
I have a form and I want to programatically submit it in Remix. How would I do that? Usually, you'd use 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 |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 2 replies
-
Conform does not support setting error outside of 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>
)
} |
Beta Was this translation helpful? Give feedback.
Conform does not support setting error outside of
onValidate
at the moment. But you can adjust the validation logic dynamically: