Comment valider des objets et tableaux

1
import { z } from 'zod'
2

3
export const userSettingsSchema = z.object({
4
  theme: z.enum(['light', 'dark']),
5
  language: z.enum(['fr', 'en']),
6
})
7

8
export const userEmailSchema = z.object({
9
  email: z.string().email('Email invalide'),
10
  active: z.boolean().default(false),
11
})
12

13
/* --- action discriminée : create | update ------------------- */
14
export const userActionSchema = z.discriminatedUnion('action', [
15
  z.object({
16
    action: z.literal('create-user'),
17
    firstName: z.string().min(2),
18
    lastName: z.string().min(2),
19
    age: z.number(),
20
    active: z.boolean(),
21
    settings: userSettingsSchema,
22
    emails: z.array(userEmailSchema),
23
  }),
24
  z.object({
25
    action: z.literal('update-user'),
26
    firstName: z.string().min(2),
27
    lastName: z.string().min(2),
28
    age: z.number(),
29
    active: z.boolean(),
30
    settings: userSettingsSchema,
31
    emails: z.array(userEmailSchema),
32
  }),
33
])

1
import { parseWithZod } from '@conform-to/zod'
2
import { data, redirect } from 'react-router'
3
import { userActionSchema } from '~/schemas/user'
4

5
export async function action({ request, params }) {
6
  const formData = await request.formData()
7

8
  const submission = await parseWithZod(formData, {
9
    async: true,
10
    schema: userActionSchema.superRefine(async (values, ctx) => {
11
      if (values.action === 'create-user') {
12
        const exists = await getUserBySlug(values.firstName.toLowerCase())
13
        if (exists) {
14
          ctx.addIssue({
15
            path: ['firstName'],
16
            code: 'custom',
17
            message: 'Ce prénom est déjà pris',
18
          })
19
        }
20
      }
21
    }),
22
  })
23

24
  if (submission.status !== 'success') {
25
    // Conform sait lire ce format et replacer les erreurs au bon endroit
26
    return data({ result: submission.reply() }, { status: 400 })
27
  }
28

29
  /* ... INSERT/UPDATE BDD puis redirect ... */
30
}

1
import {
2
  useForm,
3
  getFormProps,
4
  getInputProps,
5
  getSelectProps,
6
} from '@conform-to/react'
7
import { userActionSchema } from '~/schemas/user'
8

9
const [form, fields] = useForm({
10
  id: 'user-form',
11
  lastResult: actionData?.result,          // synchro des erreurs serveur
12
  constraint: getZodConstraint(userActionSchema), // required, minLength, etc.
13
  onValidate({ formData }) {
14
    return parseWithZod(formData, { schema: userActionSchema })
15
  },
16
  defaultValue: {
17
    firstName: user?.firstName,
18
    lastName: user?.lastName,
19
    age: user?.age,
20
    active: user?.active,
21
    action: isNew ? 'create-user' : 'update-user',
22
    settings: user?.settings,
23
    emails: user?.emails,
24
  },
25
})

1
const settingsFieldset = fields.settings.getFieldset()
2

3
<label htmlFor={settingsFieldset.theme.id}>Thème</label>
4
<select {...getSelectProps(settingsFieldset.theme)}>
5
  <option value="light">Light</option>
6
  <option value="dark">Dark</option>
7
</select>
8

9
<label htmlFor={settingsFieldset.language.id}>Langue</label>
10
<select {...getSelectProps(settingsFieldset.language)}>
11
  <option value="fr">Français</option>
12
  <option value="en">Anglais</option>
13
</select>

1
const emailFields = fields.emails.getFieldList()
2

3
{emailFields.map((emailField) => {
4
  const { email, active } = emailField.getFieldset()
5
  return (
6
    <div key={emailField.key} className="flex gap-4">
7
      <Field
8
        labelProps={{ children: 'Email' }}
9
        inputProps={getInputProps(email, { type: 'email' })}
10
        errors={email.errors}
11
      />
12
      <CheckboxField
13
        labelProps={{ children: 'Actif' }}
14
        buttonProps={getInputProps(active, { type: 'checkbox' })}
15
        errors={active.errors}
16
      />
17
    </div>
18
  )
19
})}

1
# Requête POST vue dans Network
2
settings[theme]=dark
3
settings[language]=en
4
emails[0][email]=virgile@algomax.fr
5
emails[0][active]=on
6
emails[1][email]=contact@algomax.fr
7
# emails[1][active] absent → false