How to use $page.form in components

[DePasqualeOrg]

I see that in 1.0.0-next.503 the form property was added to $page. I have several components with progressively enhanced forms, and I'd like to use $page.form in them to show validation errors in the UI, but the value of $page.form is always undefined or null. Could someone provide an example of a component using $page.form?

[teemingc]

Hi Pasquale,

I've made a stackblitz example for you here:
https://stackblitz.com/edit/sveltejs-kit-template-default-sfyuzf?file=src/routes/Something.svelte

Return a value from the action via return, or return invalid(400, {})
+page.server.js

export const actions = {
	default: () => {
		console.log('form action running');
		return { success: true };
	}
};

Receive the value from $page.form
Component.svelte

<script>
	import { page } from '$app/stores';
</script>

<h2>The form value</h2>
<p>{JSON.stringify($page.form)}</p>

[DePasqualeOrg]

Thanks @s3812497, your answers are always very helpful. The case I can't get working is when the form element is in the component. If this is just a limitation of SvelteKit, I'll open an issue about it.

[teemingc]

The case I can't get working is when the form element is in the component.

I've tried reproducing this but it seems to still work.
https://stackblitz.com/edit/sveltejs-kit-template-default-sfyuzf?file=src/routes/Form.svelte

Can you share an example of how to reproduce the issue?

[DePasqualeOrg]

Thanks, this helped me pinpoint the cause: When I provide a handler to enhance, as in:

use:enhance={handleSubmit}

which looks like this:

const handleSubmit = () => {
  return async ({ result }) => {
    console.log(result)
  };
};

$page.form remains null after submitting. Is this behavior in SvelteKit intentional?

I've edited your example here: https://stackblitz.com/edit/sveltejs-kit-template-default-p3vpyb?file=src/routes/Form.svelte

[teemingc]

Yes, this is intentional behaviour.

You will have to manually call applyAction(result) when providing your own callback.

See the example here:
https://kit.svelte.dev/docs/form-actions#progressive-enhancement-applyaction

[DePasqualeOrg]

Ah, I remember seeing that in the docs but not understanding what it's for. Now I know. Thanks again for your help!

[DePasqualeOrg]

Quick follow-up: Is there any way to get type safety when using $page.form? It looks like it's defined as any.

[sphinxc0re]

I don't really see a way to properly type $page.form. As you are able to use it even in +layout.svelte files where the actual type is different from the type within a page.