在 Svelte 和 TypeScript 中绑定数字输入

Question

我有一个 svelte 形式的表单，使用 shadcn-svelte 和 zod。

相关代码片段：

// schema.ts 

const formSchema = z.object({
  /* ... */
  maxParticipants: z.number()
});

<!-- form.svelte -->

<Form.Field {form} name="maxParticipants">
  <Form.Control let:attrs>
    <Form.Label>Max participants</Form.Label>
    <Input {...attrs} type="number" bind:value={$formData.maxParticipants} />
  </Form.Control>
  <Form.FieldErrors />
</Form.Field>

因为输入是字符串，即使输入设置为

type="number"

，它也是一个字符串，这意味着当我尝试提交时，我在输入下方收到错误（在

FieldErrors

中，来自 zod 验证）： “期望的数字，收到的字符串”.

我找不到解决方法，所以我目前所拥有的只是将输入设置为

type="text"

和 zod 模式中的

.string()

，然后在操作中处理表单提交，将其转换为数字，但这不是最佳选择。

Answer 1

对于

input

Svelte

will

的 type="number" 元素，在绑定时会将值转换为数字，但是

type

必须是静态已知的，这可能不是该组件的原因（因为类型是传入的）在这里）。

您可以创建一个更具体的

NumberInput

，在内部静态设置类型，然后值绑定将产生

number

或

null

（如果为空）。

或者，不要使用绑定并使用事件来获取值。
比如：

<Input
  value={$formData.maxParticipants?.toString() ?? ''}
  on:change={e => $formData.maxParticipants = parseInt(e.target.value)} />

（这只是为了说明该方法，并不能正确处理所有内容，例如空或仅空白的情况。）