Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1541

How to get value from svelte form component

$
0
0

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;

Viewing all articles
Browse latest Browse all 1541

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>