Search code examples
sveltesveltekitsvelte-component

Is it any way to calling SvelteKit form actions from within children components?

For example I have a route tree like this

foobar_route
|
|-+page.server.js
|-+page.svelte
|-child_component.svelte
|

In +page.server.js I have

export const actions = {

    create_content: async ({ cookies, request }) => {
        ...
    }
};

In child_component.svelte I have a form like the same one on svelte example page

<form method="POST" action="?/create_content">
   <input/>
   <button type="submit">Post</button>
</form>

And the child_component is called inside +page.svelte

<script>
...
</script>
...
<Child_component/>
...

But seems like it was not the right way to implemented it since the action was not called from the form within child component.

Is there any other way to use it than use store?

Solution

  • This works just fine for me. SvelteKit does nothing special there that would prevent this from working.

    Check the console in the browser and the Vite dev server for errors and make sure the form actually works inlined in the page. Maybe you broke something while extracting it or there was an issue from the beginning.