Recipe or provided function to ease working with multiple form submissions #7175
Description
Describe the problem
export let form and $page.form are designed around having one form submitted at a time - which is the only way possible when JavaScript is disabled. When JavaScript is enabled however, you could have multiple in-flight form submissions at the same time. This is doable today in user-land, but maybe not immediately obvious how to do. #7120 is a symptom of that.
Describe the proposed solution
Either add a recipe that shows how to implement something like that, and/or provide a helper function that eases this.
One possibility would be to provide some kind of form creator function which you create for each form:
<script>
const { form, state, action, enhance } = createForm('/?named-action');
</script>
<form method="POST" action={action} use:enhance>
<input name="username" />
{#if $form.usernameInvalid}
<span>Username invalid</span>
{/if}
<button disabled={$state.submitting}>Submit</button
</form>Calling createForm creates a encapsulated instance of a form life cycle with stores to track the submission state etc. Multiple of these can be used at once, for example inside a list of TODOs.
Another nice-to-have would be to have each instance from createForm be part of some app-wide context so you can see which submissions are currently running etc and show optimistic UI/loading spinners depending on that. Depending on how tight we want to couple this to built-ins, this would either be a custom-made setContext call at the desired place, or a global $page.forms
Alternatives considered
No response
Importance
nice to have
Additional Information
No response