SMUI sveltekit 表单提交时文本字段始终为空

Question

我刚刚开始使用 SMUI 和 sveltekit，但遇到了一个问题。。。

我在登录表单中使用 Textfield 组件，但这不起作用：

<form method="post">
    <Textfield variant="outlined" bind:value={username} label="Username"></Textfield>    
    <Textfield type="password" variant="outlined" bind:value={password} label="Password">
    <Button type="submit">Login</Button>
</form>

它使用以下代码发布到页面：

export const actions = {
    default: async ({ cookies, request }) => {

        const data = await request.formData()
        const username = data.get('username')
        const password = data.get('password')
    }
}

提交时用户名和密码均为空。

为了完成这项工作，我插入了“影子”隐藏字段

<form method="post">
    <Textfield variant="outlined" bind:value={username} label="Username"></Textfield>    
    <input type="hidden" name="username" value={username}>
    <Textfield type="password" variant="outlined" bind:value={password} label="Password">
    <input type="hidden" name="password" value={password}>
    <Button type="submit">Login</Button>
</form>

然后我得到用户名和密码的值。我假设我不需要这样做 - 我做错了什么？

编辑 2022-10-17 建议我向文本字段添加一个“name”参数，如下所示：

    <Textfield variant="outlined" value="" name="username"></Textfield>
<Textfield type="password" variant="outlined" value="" name="password"></Textfield>

这也不起作用——当表单的值出现时，它们都是空的。

还有其他想法吗？

Answer 1

您可以指定嵌套输入元素的名称，如下所示：

<Textfield input$name="username" ... />