Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Missing dataType param #1526

Closed
razvn opened this issue Nov 29, 2024 · 3 comments
Closed

Missing dataType param #1526

razvn opened this issue Nov 29, 2024 · 3 comments
Labels
type: documentation A change or addition to the documentation

Comments

@razvn
Copy link

razvn commented Nov 29, 2024

Change Type

Addition

Proposed Changes

I tried this exemple and got an error... with Svelte 5.
Turns out it needs: dataType: 'json' to work:

	const form = superForm(data, {
		dataType: 'json',
		validators: zodClient(formSchema),
	});
@razvn razvn added the type: documentation A change or addition to the documentation label Nov 29, 2024
@razvn razvn changed the title Missing dataType para, Missing dataType param Nov 29, 2024
@huntabyte
Copy link
Owner

Which example did you try?

@razvn
Copy link
Author

razvn commented Nov 30, 2024

Oh it didn’t link to the documentation line ?

const form = superForm(data, {

The from comportement exemple.

@ieedan
Copy link
Contributor

ieedan commented Dec 13, 2024

@razvn I think the problem is that you haven't read the example the whole way though. If you paste the client side code from the example straight into a page it won't work because it is meant to be a component.

To fix this you should use that code in a component as intended or adapt it by changing the code like so:

<script lang="ts">
	import * as Form from '$lib/components/ui/form/index.js';
	import { Input } from '$lib/components/ui/input/index.js';
	import { formSchema, type FormSchema } from './schema';
	import { superForm } from 'sveltekit-superforms';
	import { zodClient } from 'sveltekit-superforms/adapters';

+	let { data } = $props();
-   export let data: SuperValidated<Infer<FormSchema>>;

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

	const { form: formData, enhance } = form;
</script>

<form method="POST" use:enhance>
	<Form.Field {form} name="username">
		<Form.Control>
			{#snippet children({ props })}
				<Form.Label>Username</Form.Label>
				<Input {...props} bind:value={$formData.username} />
			{/snippet}
		</Form.Control>
		<Form.Description>This is your public display name.</Form.Description>
		<Form.FieldErrors />
	</Form.Field>
	<Form.Button>Submit</Form.Button>
</form>

Repository owner locked and limited conversation to collaborators Dec 13, 2024
@huntabyte huntabyte converted this issue into discussion #1552 Dec 13, 2024

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Labels
type: documentation A change or addition to the documentation
Projects
None yet
Development

No branches or pull requests

3 participants