SuperDebug is not reactive when using data.form from +page.server
AristideBH opened this issue · 1 comments
Hello !
I've tried to use the SuperDebug component from Superforms, but it seems it isn't reactive to the form changes.
My form and the validation system works also as intended, but the SuperDebug only load with initial state, and doesn't reflect any change to the fields nor their validation state.
I've simply imported the component as per Superform's doc :
import SuperDebug from 'sveltekit-superforms/client/SuperDebug.svelte';
Then used it with data.form
provided by the +page.server.ts
:
<Form.Root method="POST" form={data.form} {options} {schema} action="?/submit" let:config>
<!-- Rest of the form-->
</Form.Root>
<SuperDebug data={data.form} />
Trying to use Superforms $form
store as shown below, simple doesn't work as its type is unexpected by the Form.Root component :
<script>
//...
const { form } = superForm(data.form);
</script>
<Form.Root method="POST" {$form} {options} {schema} action="?/submit" let:config>
<!-- ... -->
And give this error :
Type '{ method: string; $form: { bundleName: string; formats: { name: string; width: number; height: number; }[]; }; options: Partial<{ id: string; applyAction: boolean; invalidateAll: boolean; resetForm: boolean | (() => boolean); ... 24 more ...; warnings: { ...; }; }>; schema: ZodObject<...>; action: string; }' is not assignable to type '{ schema: Validation; form: SuperValidated<Validation, any>; options?: Partial<{ id: string; applyAction: boolean; invalidateAll: boolean; resetForm: boolean | (() => boolean); ... 24 more ...; warnings: { ...; }; }> | undefined; ... 218 more ...; 'on:fullscreenerror'?: EventHandler<...> | ... 1 more ... | undefined...'.
Object literal may only specify known properties, but '$form' does not exist in type '{ schema: Validation; form: SuperValidated<Validation, any>; options?: Partial<{ id: string; applyAction: boolean; invalidateAll: boolean; resetForm: boolean | (() => boolean); ... 24 more ...; warnings: { ...; }; }> | undefined; ... 218 more ...; 'on:fullscreenerror'?: EventHandler<...> | ... 1 more ... | undefined...'. Did you mean to write 'form'?
I've just seen the debug props on <Form.Root/> to activated Superdebug inline. I'll mark this as close as I wasn't aware of this option.