是否可以在成功提交后不重置增强的SvelteKit表单?

Question

我有以下增强的SvelteKit表单:

<script>
import { enhance } from '$app/forms';
</script>
<form method="POST" use:enhance>
<input name="name" />
</form>

当它被成功提交时，表单将被重置。有什么办法可以避免这种情况吗?

Answer 1

您可以通过提供submit function来进一步定制enhance动作的行为。这个函数反过来可以返回一个回调，当表单被提交时调用。

这个回调的第一个参数中的update属性是一个函数，它将触发逻辑，如果这个回调没有设置，它需要一个选项reset，它允许你在成功提交后不重置表单。

<script>
import { enhance } from '$app/forms';
function handleSubmit() {
// ...
return async ({ update }) => {
await update({ reset: false });
};
}
</script>
<form method="POST" use:enhance={handleSubmit}>
<input name="name" />
</form>

Answer 2

如果你(像我一样)想要有一个像enhance一样工作的动作，但永远不会重置<form>中的输入值，我认为你可以使用以下customEnhance，我刚刚为这个特定目的写的:

custom-enhance.js

import { enhance } from '$app/forms';
export function customEnhance(form, submitFunction) {
function customSubmitFunction() {
return async (actionResult) => {
await actionResult.update({reset: false})
if(submitFunction){
await submitFunction(actionResult)
}
}
}
return enhance(form, customSubmitFunction)
}

+ page.svelte

<script>
import { customEnhance } from './custom-enhance'
</script>
<form method="POST" use:customEnhance>
<!-- Does never reset form values, but does otherwise work like "enhance". -->
...
</form>

我还没有测试过它，所以不能保证我得到了正确的实现，但到目前为止对我来说工作得很好:)