Текстовое поле 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 Было предложено добавить параметр «имя» в текстовые поля следующим образом:

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

Это также не работает - когда значения приходят для формы, они оба равны нулю.

Другие идеи?

Answer 1

Вы можете указать имя вложенного элемента ввода следующим образом:

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

Answer 2

Вы можете создать обычное поле ввода и пометить его как скрытое, а затем установить значение с двусторонней привязкой:

          <Select variant="filled" bind:value={selectedUserId} label="User">
      <Option value="" />
      {#each usersList as user}
        <Option value={user.id}>{user.firstName} {user.lastName}</Option>
      {/each}
    </Select>
    <input hidden name="user-select" value={selectedUserId} />