将 SvelteKit Superforms 与 Zod 一起使用时，表单数据中缺少复选框

Question

我正在尝试使用 SvelteKit Actions、Superforms、Formsnap 和 Zod 构建一个表单。但我的复选框没有按预期工作。

// schema.ts

export const formSchema = z.object({
    ...
    private: z.boolean().default(true),
    ...
});

<!-- +page.svelte -->

<script lang="ts">
    ...
    export let data: PageData;
    const form = superForm(data.form, {
        validators: zodClient(formSchema),
    });
    const { enhance, form: formData, errors, submitting } = form;
   ...
</script>
...
<Form.Field {form} name="private">
    <Form.Control let:attrs>
            <Form.Label>Private</Form.Label>
            <Checkbox {...attrs} bind:checked={$formData.private} />
    </Form.Control>
</Form.Field>
...

在客户端，事情似乎按预期工作（SuperDebug 组件中的值和变量正确更新值），但是提交表单时，表单数据中缺少

private

字段（在

onSubmit 中观察到） 

事件和服务器上）。这意味着在服务器上该值始终设置为 false（因为它丢失了）。

我尝试使用

<input type="checkbox" />

而不是自定义

<Checkbox />

组件，但问题仍然存在。好像是提交表单的时候出了问题。

为什么会发生这种情况？这个设置似乎应该有效，并且它适用于我所有其他（文本）表单字段。

Answer 1

您似乎缺少必填的隐藏字段。

<Form.Field {form} name="private">
<Form.Control let:attrs>
        <Form.Label>Private</Form.Label>
        <Checkbox {...attrs} bind:checked={$formData.private} />
        <!-- Add hidden field -->
        <input name={attrs.name} value={$formData.private} hidden />
</Form.Control>
</Form.Field>

有关更多信息，请参阅superforms文档