SvelteKit编辑表单验证错误回显问题解决方案咨询

核心问题是编辑页面提交表单后，错误反馈的form数据未被组件使用，组件始终依赖初始加载的data。只需修改编辑页的数据源优先级，让组件优先使用提交后的form数据即可。

步骤1：修改编辑页 artists/[slug]/+page.svelte #

将formData的数据源改为form ?? data，这样当表单提交后存在form数据（含错误信息和用户输入）时优先使用，否则回退到初始的data：

<script>
    import ArtistForm from "../../../components/forms/ArtistForm.svelte";

    export let data;
    export let form;
</script>

<ArtistForm formData={form ?? data} mode="edit" />

步骤2：确保编辑Action返回结构一致性 #

编辑模式的actions返回的对象要和load函数返回的data结构保持一致，必须包含id、表单字段（如name）以及errors字段，这样组件才能正确渲染隐藏ID和错误提示：

// artists/[slug]/+page.server.js 中的 actions
export const actions = {
    default: async ({ request, params }) => {
        const data = Object.fromEntries(await request.formData());
        const artist = artistDTO(data);

        if (artist?.errors && !emptyObject(artist.errors)) {
            // 确保返回的对象包含id，和load返回的data结构一致
            return { ...artist, id: params.slug };
        }

        const response = await updateArtist(artist);

        return {
            ...artist,
            id: params.slug,
            "errors": response.errors,
        }
    }
};

原理说明 #

• SvelteKit中，表单提交后Action返回的数据会自动赋值给页面组件的form变量；
• 编辑页原本只传入data（初始加载的艺术家数据），提交错误后form有值但未被使用；
• 使用form ?? data后，组件会优先展示提交后的用户输入和错误信息，无错误时则显示初始数据。

内容的提问来源于stack exchange，提问作者MrCujo