Binding with forms does not seem to work about sveltekit-superforms HOT 14 CLOSED

If you set options.dataType = 'json', the actual content of $form will be posted. But if you haven't set it, it will, according to the html standard, post the fields in the <form> element. So I suspect that you compose the values to $form, but they are not reflected in the form fields.

from sveltekit-superforms.

Wow! Hero!

from sveltekit-superforms.

Sorry to come back... I am now facing a small other issue :-)

I am calculation a formid value. I am now using:

	const { form, errors, constraints, enhance } = superForm(data.form, {
		dataType: 'json',
		onSubmit(input) {
			$form.formid = getFormId();
		}
	});

this works fine. But because I want to use this everywhere, I thought I could make a generic function:

import { superForm } from 'sveltekit-superforms/client';
import type { AnyZodObject } from 'zod';

export function hSuperForm<T extends AnyZodObject>(
  ...params: Parameters<typeof superForm<T>>
) {
  return superForm(params[0], {
    // Your defaults here
    dataType: 'json',
    onSubmit(input) {
        $form.formid = getFormId();
    },
    ...params[1]
  });
}

of course this does not work as $form.formid is not known.

Any suggestion to be able to add a generic way of adding a property formid here?

from sveltekit-superforms.

In that case, maybe you can extend from the schema that contains the formid field, that all other schemas should derive from?

hSuperForm<T extends typeof formIdSchema>

(Just a sidenote that you already know probably: dataType = 'json' makes javascript a requirement.)

from sveltekit-superforms.

Okay, that's a good suggestion; but still, how would I set the value from with the hSuperForm function? Starting from the onSubmit(input) how can I set this value? I don't see any way to do this?

from sveltekit-superforms.

Ah, now I see that it's onSubmit. If you just want to post an extra field, add it to the FormData of the submit event.

onSubmit({data}) {
  data.set('formid', getFormId())
}

from sveltekit-superforms.

Check this out for event signature: https://kit.svelte.dev/docs/types#public-types-submitfunction

from sveltekit-superforms.

Well, that's basically what does not work. As from I change the dataType = 'json' I cannot set any extra fields, or at least it is not added to the object itself.
So I hoped that this would allow me to add the formid as the property of the formIdSchema schema.

Now using

		const data = await request.formData();
		const formid = data.get('formid') as string;

		const form = await superValidate(data, schema);
		if (!form.valid) {
			return fail(400, { form });
		}
		form.data.formid = formid;

but now I have to repeat code everytime here :-(

Other option is

	const { form, errors, constraints, enhance } = hSuperForm(data.form, {
		onSubmit(input) {
			$form.formid = getFormId();
		}
	});

in every page.

So just looking for the most optimal way of doing this.

from sveltekit-superforms.

Yes, it cannot be added to the object, since its type doesn't have a formid field. :) I'd go for the first way you're doing it, but factorize it to a function.

from sveltekit-superforms.

I have now create an wrapper around the superValidate

export async function hSuperValidate<T extends AnyZodObject>(
	req: Request,
	schema: T,
	options?: SuperValidateOptions<T>
): Promise<Validation<T>> {
	const data = await req.formData();
	const formid = data.get('formid') as string;

	const form = await superValidate(data, schema, options);
	//@ts-ignore
	form.data.formid = formid;
	return form;
}

the only dirty thing is the part where I set the formid... of course it's giving me a ts error, but I just ignore it.

from sveltekit-superforms.

I wish I could use a Type instead of AnyZodObject that contains the formid

I am using

export const hFormObject = z.object({
	formid: z.string()
});

and then

const schema = hFormObject.extend({
	phoneNumber: z.string().min(9),
	remember: z.boolean().default(false)
});

as a base for my schema's, but I have no clue how to make this a type I can use.

from sveltekit-superforms.

Doesn't this work?

export async function hSuperValidate<T extends typeof schema> // (or hFormObject)

from sveltekit-superforms.

🤦

yes!

from sveltekit-superforms.

Great, I'll close this then. :)

from sveltekit-superforms.