如何在 Svelte 中使用 `use:enhance` 提交时不重置表单？

Question

我有一个表单，它使用在 - 中定义的表单use:enhance和操作来更新产品信息+page.server.ts- 但是，每当我提交表单时，都会重置表单元素，并且它们全部变为空白，这是意外的，因为这些元素的值由和use:enhance指定$page.data.product文档指出use:enhance运行invalidateAll.

尽管如此，有没有办法阻止函数内发生这种重置use:enhance？

Answer 1

从#7326开始，您可以将reset: false选项传递给回调update中的函数enhance：

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

<form
  method="POST"
  use:enhance={() => {
    return async ({ update }) => {
      update({ reset: false });
    };
  }}>
  <input type="text" name="name" />
  <button>Submit</button>
</form>

Answer 2

如果您从操作返回一个函数use:enhance，则当您从表单提交获得响应时，将调用该函数。该函数又获取一个update函数，该函数采用一个选项reset，您可以指定该值false以不重置表单：

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

<form
  method="POST"
  use:enhance={() => {
    return async ({ update }) => {
      await update({ reset: false });
    };
  }}
>
  <input type="text" name="name" />
  <button>Submit</button>
</form>