Progressive Form use:enhance

[brnkgabriel]

Change Type

Addition

Proposed Changes

Hi @huntabyte

Thanks for porting shadcn to svelte.

In the form documentation, it is possible to obtain enhance from the code below by destructuring the form object

<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 {
  type SuperValidated,
  type Infer,
  superForm,
 } from "sveltekit-superforms";
 import { zodClient } from "sveltekit-superforms/adapters";
 
 let { data }: { data: { form: SuperValidated<Infer<FormSchema>> } } =
  $props();
 
 const form = superForm(data.form, {
  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>

It is equally possible to obtain the enhance from sveltekit $app/forms:
import { enhance } from '$app/forms';

The enhance from form destructuring didn't always work, which made me use the one from sveltekit. Not sure, and still don't know why it doesn't always work. However the one from sveltekit always works.

What could be the problem?

[PorkyC]

Thank you for the alternative import, I had the same issue. Did you end up figuring this out?

[PorkyC]

After further trial, destructuring without the validator works for me.

const form = superForm(data.form);
const { form: formData, enhance } = form;