How to not reset the form on submit with `use:enhance` in Svelte?-CodePudding

I have a form that updates a product's information using a form with use:enhance and actions defined in page.server.ts - However, whenever I submit the form, use:enhance resets the form elements and they all become blank, which is unexpected as the value for these elements is specified by $page.data.product, and the docs state that use:enhance runs invalidateAll.

Nonetheless, is there a way to stop this reset from occurring within the use:enhance function?

CodePudding user response：

If you return a function from the use:enhance action, that function will be called when you get a response from the form submit. This function in turn gets an update function which will emulate the browser-native behavior.

If you don't call update the form will not be reset:

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

<form
  method="POST"
  use:enhance={({ form, data, action, cancel }) => {
    return async ({ result, update }) => {};
  }}
>
  <input type="text" name="name" />
  <button>Submit</button>
</form>

You could then use applyAction for more fine-grained customization.