State Binding Problem - ownership_invalid_mutation

[Jonyberry]

Hi,

I'm working with SvelteKit and SuperForms for handling form validation and submission, but I'm encountering the "ownership_invalid_mutation" error. I saw this topic with the same error, and I understand that I can create form state in the parent (login-form in the page) and it should work. However, I want to know if what I'm trying to do is achievable.

Here’s a simplified version of my code; I have removed some typings.

$lib/form.svelte

<script lang="ts">
    import { superForm, defaults, type Infer, type SuperForm } from "sveltekit-superforms";
    import { zod, zodClient } from "sveltekit-superforms/adapters";
    import { setFormContext } from "./context";
    import { get } from "svelte/store";

    let { onSubmit, schema, children, defaultValues } = $props();

    const form = superForm(defaultValues, {
        SPA: true,
        validators: zodClient(schema),
        onUpdate({ form }) {
            if (form.valid) {
                onSubmit?.(form.data);
            }
        }
    });

    setFormContext(form);
    const { enhance, form: formStore } = form;
    let formData = $state(get(formStore));

    $effect(() => {
        formStore.set(formData);
    });
</script>

<form method="POST" use:enhance>
    {@render children(formData)}
</form>

lib/form-field.svelte

<script lang="ts">
    import { getFormContext } from "./context";
    import * as Form from "../components/shadcn/form";

    let { name, input } = $props();
    const form = getFormContext();
</script>

<Form.Field {form} {name}>
    <Form.Control>
        {@render input(props)}
    </Form.Control>
</Form.Field>

login-form.svelte

<script lang="ts">
    import { Button } from "$lib/components/shadcn/button";
    import { Input } from "$lib/components/shadcn/input";
    import { Label } from "$lib/components/shadcn/label";
    import { Form, FormField } from "$lib/form";
    import { loginFormSchema } from "./schema";
</script>

<Form schema={loginFormSchema} onSubmit={(values) => console.log(values)}>
    {#snippet children(formData)}
    <div class="grid gap-4">
        <FormField schema={loginFormSchema} name="email">
            <Label for="email">Email</Label>
            <Input bind:value={formData.email} /> // <--- this is the problem
        </FormField>
        <FormField schema={loginFormSchema} name="password">
            <Label for="password">Password</Label>
            <Input bind:value={formData.password} />
        </FormField>
        <Button type="submit">Login</Button>
    </div>
    {/snippet}
</Form>

Can someone please help me with sending state from a form component to a page and using that form state in input binding? Also, in my first version, I tried sending the form store directly instead of using state, but I received a different error: Cannot subscribe to stores that are not declared at the top level of the component

Any advice would be greatly appreciated!

Thanks!

[brunnerh]

Unless you want to do something roundabout like passing a setter function around so the modification code technically exists in the form component, this probably will not work like this.

// in form
function setter(property, value) {
	formData[property] = value;
}

{@render children(formData, setter)}

<!-- usage site -->
<Form onSubmit={(values) => console.log(values)}>
	{#snippet children(formData, set)}
		<label for="email">Email</label>
		<input id="email" bind:value={() => formData.email, v => set('email', v)} />
		<!-- ... -->
	{/snippet}
</Form>

Example

I would recommend creating the state outside the form component ($state({})) and pass it via a binding instead.
You could do the initial assignment from the store via Object.assign(formData, $formStore).
Example

[Jonyberry]

Thanks a lot for the answer and examples! That makes sense, and I’ll give it a try. Really appreciate your help! 🙌