Allow resetting form based on remote function result.

[motherthestate]

Describe the problem

I am using a remote function to login with enhance. The issue is enhance keeps my form values even after e redirect, meaning the values will be back when I sign out and land on the login page again.

I could fix it by using the enhance callback's form.reset() but I cannot conditionally reset based on the my remote function's result since it is not returned from submit. Also the docs wrap it in a try catch but submit never seems to throw an error even when using invalid().

Describe the proposed solution

Using enhance, I don't know if there really is a good reason to keep form values after a redirect. But, maybe I missed a better way of doing it.

Alternatives considered

No response

Importance

nice to have

Additional Information

No response

[sillvva]

That's strange that the values are kept. Normally those would reset when you navigate, unless the form is part of a layout. You can conditionally reset based on the result like this:

<form {...remoteForm.enhance(async ({ submit, form }) => {
    try {
        await submit()

        if (remoteForm.result) {
            form.reset();
        }
    } catch (error) {
        console.error(error);
    }
})}>

This would not work if the form redirects on success, as there's currently no way to detect a redirect from inside .enhance(). As a current workaround, you could do something like this:

	// <form bind:this={formEl} {...loginForm}>
	let formEl = $state<HTMLFormElement | null>(null);
	onNavigate(() => {
		formEl?.reset();
	});

[motherthestate]

@sillvva I've been able to reproduce it in this minimal repo.

Sign in and then sign out. The values will be persisted. Your workaround works but only for values if the form had an error before a successfull sign in attempt, the error will also still be visible after the sign out.

[sillvva]

I have an open PR for a programmatic reset, including values, issues, result, etc.

[motherthestate]

@sillvva Are values currently supposed to reset on redirect then? They don't in my example. Will your pr extend to navigation / redirects?

[sillvva]

It seems I was mistaken about that, because I've been using form.set() in the script block. That would be another workaround to reset only the values.

As a more complete reset workaround, you can use .for() to create a whole new form instance on each page load. It submits the value as an .id property in the remote function, but your schema should be able to parse that out without you having to make any changes to it.

<script lang="ts">
	...
	const form = login.for('login');
</script>

	<form
		{...form.enhance(async ({ submit, form }) => {
			submitted = true;
			await submit();
		})}
	>
		...
	</form>

If the PR I mentioned is approved, this would be the better solution:

<script lang="ts">
	...
	login.reset(); // resets everything
</script>

[sillvva]

I was also incorrect about detecting a redirect. You can do so in the .enhance() function like this:

try {
	await submit();

	if (login.result) {
		// type is result
	} else if (login.fields.allIssues()) {
		// type is issues
	} else {
		// type is redirect
	}
} catch (err) {
	// type is error
}