Comment valider des nombres et booléens

1
import { z } from "zod"
2

3
export const userCreateSchema = z.object({
4
  action: z.literal("create-user"),
5
  firstName: z.string().min(2, "2 caractères mini"),
6
  lastName:  z.string().min(2),
7
  age:       z.number({ required_error: "L’âge est requis" }),
8
  active:    z.boolean().default(false),          // ← coche facultative
9
})
10

11
export const userUpdateSchema = userCreateSchema.extend({
12
  action: z.literal("update-user"),
13
})
14

15
export const userActionSchema = z.discriminatedUnion(
16
  "action",
17
  [userCreateSchema, userUpdateSchema],
18
)

1
firstName=Alice
2
age=42        ← "42" (string)
3
active=on     ← "on" (string) ou… rien du tout si décochée

1
<Field
2
  labelProps={{ children: "Âge" }}
3
  inputProps={{
4
    ...getInputProps(fields.age, { type: "number" }),
5
    min: 0,
6
  }}
7
  errors={fields.age.errors}
8
/>

1
import { useInputControl } from "@conform-to/react"
2
import { useId } from "react"
3
import { Checkbox } from "./ui/checkbox"         // composant Radix stylé
4
import { ErrorList } from "./ErrorList"
5

6
export function CheckboxField({ labelProps, buttonProps, errors }: {...}) {
7
  const id = buttonProps.id ?? useId()
8
  const input = useInputControl({
9
    key: buttonProps.key,
10
    name: buttonProps.name,
11
    formId: buttonProps.form,
12
    initialValue: buttonProps.defaultChecked ? "on" : undefined,
13
  })
14

15
  return (
16
    <div className="flex gap-2">
17
      <Checkbox
18
        {...buttonProps}
19
        id={id}
20
        checked={input.value === "on"}
21
        onCheckedChange={(state) => input.change(state.valueOf() ? "on" : "")}
22
        aria-invalid={errors?.length ? true : undefined}
23
        aria-describedby={errors?.length ? `${id}-error` : undefined}
24
        type="button"
25
      />
26
      <label htmlFor={id} {...labelProps} />
27
      <ErrorList id={`${id}-error`} errors={errors} />
28
    </div>
29
  )
30
}

1
<CheckboxField
2
  labelProps={{ children: "Actif" }}
3
  buttonProps={{
4
    ...getInputProps(fields.active, { type: "checkbox" }),
5
  }}
6
  errors={fields.active.errors}
7
/>

1
export async function addUser({
2
  firstName, lastName, age, active      // ← tout est déjà tipé
3
}: z.infer<typeof userCreateSchema>) {
4
  const slug = createSlug({ firstName })
5
  /* … */
6
  const newUser: User = {
7
    id: db.users.length + 1,
8
    firstName,
9
    lastName,
10
    slug,
11
    age,
12
    active,
13
  }
14
  db.users.push(newUser)
15
  return { slug }
16
}