Can't get Formsnap & Superforms to work

[malkinmag]

Hello everyone,

I can't get the form element to work.

src\routes\shadcn\schema.js:

import { z } from "zod";
export const formSchema = z.object({
  email: z
    .string()
    .email({ message: "Please enter a valid email" }),
});
export default formSchema;

src\routes\shadcn+page.server.js:

import { superValidate } from "sveltekit-superforms";
import { formSchema } from "./schema";
import { zod } from "sveltekit-superforms/adapters";

export const load = async () => {
    return {
        form: await superValidate(zod(formSchema))
     };
};

export const actions = {
test: async ({ request }) => {
        const form = await superValidate(request, zod(formSchema));
        console.log("Backend: ", form)
        if (!form.valid) {
            return fail(400, { form });
        }
        return
    },
}

src\routes\shadcn+page.svelte:

<script>
	import { formSchema } from './schema';
	import SuperDebug, { superForm } from 'sveltekit-superforms';
	import { zodClient } from 'sveltekit-superforms/adapters';

	export let data;

	const { form, errors, enhance } = superForm(data.form, {
		validators: zodClient(formSchema)
	});
</script>

<SuperDebug data={$form} />

<form method="POST" use:enhance>
	<Form.Field {form} name="email">
		<Form.Control let:attrs>
			<Form.Label>Email</Form.Label>
			<Input {...attrs} bind:value={$form.email} />
		</Form.Control>
		<Form.Description>Test</Form.Description>
		<Form.FieldErrors />
	</Form.Field>
	<Form.Button>Submit</Form.Button>
</form>

With this I always get the error: TypeError: Cannot read properties of undefined (reading 'email')

With this form element, however, everything works as it should and without errors:

<form method="POST" action="?/test" use:enhance>
	<div>
		<input type="text" name="email" class=" bg-gray-400" bind:value={$form.email} />
		{#if $errors.email}
			<p>{$errors.email}</p>
		{/if}
	</div>
	<button type="submit">Submit</button>
</form>

What am I doing wrong?

[gregmsanderson]

Hi,

I'm using the form component within an SPA. It works for me but it's hard to compare exactly since I don't have the server.ts page bit to compare. My guess would be that in the script in your page.svelte you perhaps instead need to have:

import { formSchema } from './schema';
import SuperDebug, { superForm } from 'sveltekit-superforms';
import { zodClient } from 'sveltekit-superforms/adapters';

export let data;

const form = superForm(data, {
   validators: zodClient(formSchema),
});
 
const { form: formData, errors, enhance } = form; // ... since this line then lets you access $formData ...

Having done that, you can now access $formData. Since based on that TypeError: Cannot read properties of undefined (reading 'email') it sounds to me like form is undefined.

So you could then have:

<form method="POST" use:enhance>
	<Form.Field {form} name="email">
		<Form.Control let:attrs>
			<Form.Label>Email</Form.Label>
			<Input {...attrs} bind:value={$formData.email} />
		</Form.Control>
		<Form.Description>Test</Form.Description>
		<Form.FieldErrors />
	</Form.Field>
	<Form.Button>Submit</Form.Button>
</form>

... with the change being the input value is now using $formData.

Like I say: total guess but can't hurt to try that until someone else suggests a solution :)

[zvolsky]

Sound to me like form is undefined

I have named the form object superform to distinguish between form and its .form propery.
const superform = superForm(data.form, ..)
And it do't want work and nothing is shown on the screen.
I confirm that it works now for me, when I have renamed to
const form = superForm(data.form, ..)

[malkinmag]

Thanks!

const form = superForm(data.form, {
		validators: zodClient(formSchema)
	});

	const { form: formData, errors, enhance } = form;

Made the trick for me