I am using shadcn-svelte
and it's form component. And I wanted to understand, how can I get the value entered by user on the server side. In the example below, I am trying to get the value note
. As far as I can tell, I don't think I am doing anything wrong, (I followed this example), and yet when I do console.log
in +page.server.ts
i get an empty value for note
.
My component:
<script lang="ts"> import { Carta, MarkdownEditor } from 'carta-md'; import { code } from '@cartamd/plugin-code'; import 'carta-md/default.css'; import { browser } from '$app/environment'; import '$lib/styles/github.scss'; import { formSchema } from './schema'; import { superForm } from 'sveltekit-superforms'; import SuperDebug from 'sveltekit-superforms'; import { zodClient } from 'sveltekit-superforms/adapters'; import * as Form from '$lib/components/ui/form/index'; import type { PageData } from '../$types'; export let data: PageData; const form = superForm(data.form, { validators: zodClient(formSchema) }); const { form: formData, enhance } = form; // TODO: the editor doesn't change it's background color when changed to light mode const carta = new Carta({ sanitizer: false, extensions: [code()] });</script><div class="flex w-3/4 flex-col"><form method="POST" use:enhance><Form.Field {form} name="note"><Form.Control><div class="flex flex-col justify-end space-y-4"><MarkdownEditor bind:value={$formData.note} {carta} mode="tabs" theme="github" placeholder="Enter your note" /></div></Form.Control><Form.FieldErrors /></Form.Field><Form.Button variant="default" type="submit">Save</Form.Button> {#if browser}<SuperDebug data={$formData} /> {/if}</form></div>
MarkdownEditor
is a ready made component, downloaded from here
My +page.server.ts
is as follows:
import type { Actions } from '@sveltejs/kit';import type { PageServerLoad } from './$types';import { superValidate } from 'sveltekit-superforms';import { formSchema } from './schema';import { zod } from 'sveltekit-superforms/adapters';export const load: PageServerLoad = async () => { return { form: await superValidate(zod(formSchema)) };};export const actions: Actions = { default: async ({ request }) => { const form = await superValidate(request, zod(formSchema)); console.log(form); }};
And the zod schema is as follows:
import { z } from 'zod';export const formSchema = z.object({ note: z.string().min(2, 'Too short! The note must have atleast 20 characters')export type FormSchema = typeof formSchema;