svecosystem/formsnap

Formsnap options do nothing

benjaminalgreen opened this issue · 2 comments

benjaminalgreen commented

Passing options prop doesn't result in anything. I'm testing the functionality with my shadcn form below. The form works as intended and I receive a result from the server, but the onSubmit, onResult, etc. don't trigger. A few things to note, the form is in a separate component (as suggested in the shadcn form example) and the server-side action includes a few external API calls with a json array returned.

Not sure what I'm doing wrong but any help would be appreciated!

<script lang="ts"> import * as Form from '$lib/components/ui/form'; import { formSchema, type FormSchema } from './schema'; import type { SuperValidated } from 'sveltekit-superforms'; import { Sparkles } from 'lucide-svelte'; import { type FormOptions } from 'formsnap'; import { useMatchStore } from '$lib/stores/matchStore'; export let form: SuperValidated; export let queryData: string; const options: FormOptions = { onSubmit: () => { console.log('onSubmit'); }, onResult: () => { console.log('onResult'); }, onUpdate: () => { console.log('onUpdate'); }, onUpdated: () => { console.log('onUpdated'); }, onError: () => { console.log('onError'); } }; </script>

<Form.Root method="POST" {options} {form} schema={formSchema} let:config>
<Form.Field {config} name="query" let:setValue>
<Form.Input type="hidden" />
<Form.Button variant="ghost" size="sm" on:click|once={() => setValue(queryData)}
></Form.Button
>
</Form.Field>
</Form.Root>

Joshimello commented

Are you getting the issue "No form data sent to superForm, schema type safety cannot be..." in console?
If so, in Form.Root, pass form={data.form} instead of {form}.

This is in the case where your +page.svelte.ts returns { form: await superValidate(formSchema) }, the form object appears at data.form.
Remember to export let data also!

huntabyte commented

I've had other reports of users experiencing the methods specifically not working as expected using the <Form.Root /> component. We are in the process of rewriting and simplifying the formsnap APIs to support Superforms v2, so this will likely be addressed then. In the meantime, you can see the "Controlled Usage" section in the Form.Root docs to move the options to your script tag. https://formsnap.dev

  • 👍1