How do I access form data and errors from other pages?

[colmanhumphrey]

I'm following https://kit.svelte.dev/docs/form-actions, but I'm getting a bit stuck on accessing form data when using the form in a component outside of the initial route.

There's an example in the docs, where you'd put your login action (from /src/routes/login/+page.server.js) in something like /src/routes/+layout.svelte. How does one use all the various elements on form if you use the form this way? E.g. form?.success and form?.missing later on.

I see in https://kit.svelte.dev/docs/form-actions#anatomy-of-an-action there's a note about how $page.form will contain this data, but I can't get that to work.

For reference, my particular use-case is using an email sign-up input form in the footer:

• I've defined the action in /src/routes/email/+page.server.js. This hits an API, which could fail.
• I have a component, /src/lib/EmailForm.svelte that sets up a form for this action.
• I use the component in /src/routes/+layout (through /src/routes/Footer.svelte).

So far I've made some progress showing loading and success with the following:

<script>
 import { enhance } from "$app/forms"

 let loading = false
 let successForm = false
</script>

...
{#if successForm}
    <p>
      (something about registering)
    </p>
  {:else}
    <form
      method="POST"
      action="/email"
      use:enhance={({ form, data, action, cancel }) => {
                  loading = true
                  return async ({ result, update }) => {
                    loading = false
                    if (result.data?.success) {
                      successForm = true
                    }
                    update()
                  }
                  }}
    >
...

This feels a bit off already, but then for errors, should I create a store where the action is originally defined? Or do it all within return async ({ result, update }) => { and update a bunch of local variables? Let's say in particular for form?.missing.

Thanks!

[teemingc]

The issue was that calling update() did not update the page.form values. See the reason below:

Without an argument, use:enhance will emulate the browser-native behaviour, just without the full-page reloads. It will:

update the form property, $page.form and $page.status on a successful or invalid response, but only if the action is on the same page you're submitting from. So for example if your form looks like <form action="/somewhere/else" ..>, form and $page will not be updated. This is because in the native form submission case you would be redirected to the page the action is on.

https://kit.svelte.dev/docs/form-actions#progressive-enhancement-use-enhance

Otherwise, something like this example should work for you:
https://stackblitz.com/edit/sveltejs-kit-template-default-dgx6kl?file=src/lib/EmailForm.svelte

<script>
// src/routes/+page.svelte
 import { enhance, applyAction } from "$app/forms";
 import { page } from '$app/stores';

 let loading = false
</script>

{#if $page.form?.success}
  <p>(something about registering)</p>
{:else}
  <form
    method="POST"
    action="/email"
    use:enhance={() => {
          loading = true
          return async ({ result, update }) => {
            await applyAction(result) // manually call applyAction to update `page.form`
            await update()
            loading = false
          }
    }}
  >
    <button>Submit</button>
  </form>
{/if}

// src/routes/email/+page.server.js
import { invalid } from '@sveltejs/kit';

export const actions = {
	default: () => {
		// returning some data with invalid() also updates the `page.form` property
		// return invalid(400, { missing: true, password })

		return { success: true };
	}
};

[colmanhumphrey]

Thanks @s3812497 this looks great! I will play around with this later today to confirm I haven't done something stupid, but on first glance the blitz page looks ideal.

[colmanhumphrey]

Perfect @s3812497 — thanks!