<aside> 💡

Exercice 6 Utilisez l’une des 2 solutions présentées ci-dessous ou bien votre propre solution afin d’ajouter la gestion d’erreurs sur les formulaires de la création/édition de parcours et d’UE. Lisez attentivement les 2 solutions avant d’en choisir une.

</aside>

1. Ajout d’une librairie aidant à la validation de données

Écrivez cette commande dans le terminal:

bun add zod

TypeScript-first schema validation with static type inference

Zod est une librairie qui permet d’effectuer de la validation d’objets au runtime permettant d’ajouter de la sécurité dans notre application. Dans notre cas, nous allons l’utiliser pour valider nos inputs avant de les envoyer vers le back-end.

Ajout d’un helper pour le typage

Le helper ZodErrorTree automatise le typage des erreurs générées par Zod à partir d’un schéma, ce qui permet d’avoir un code React plus sûr, plus propre et 100% typé sans effort.

Dans utils/zod.ts

import type z from "zod"

/**
 * Génère automatiquement le type des erreurs renvoyées par Zod
 * sous forme d'arbre (via `z.treeifyError`), à partir d'un schéma donné.
 *
 * Ce helper permet :
 * - d'obtenir un typage précis des erreurs pour chaque champ d'un formulaire
 * - d'activer l'autocomplétion dans l'éditeur (VSCode, WebStorm…)
 * - d'éviter de créer manuellement des types d'erreurs pour chaque schema
 *
 * @template TSchema - Le schéma Zod dont on veut extraire le type d'erreur.
 * @example
 * const schema = z.object({
 *   email: z.string().email(),
 * });
 *
 * type Errors = ZodErrorTree<typeof schema>;
 *
 * // errors.email.errors[0] → autocomplétion + typage garanti
 */
export type ZodErrorTree<TSchema extends z.ZodTypeAny> = ReturnType<
  typeof z.treeifyError<z.infer<TSchema>>
>

Ajout de la validation afin la soumission du formulaire

Créez une fonction validateUeForm :

import { z, type ZodFormattedError } from "zod"

// À placer en dehors du composant (au début du fichier, après les imports)
const schema = z.object({
      intitule: z
        .string()
        .min(1, { message: "Le nom de l'ue est requis" }),
      numeroUe: z
        .number()
        .int()
    })
    
// Dans le composant

const [errors, setErrors] = useState<ZodErrorTree<typeof schema>>()

const validateForm = (ue: PartialUe) => {
    const isValidInput = schema.safeParse(ue)

    if (!isValidInput.success) {
      setErrors(z.treeifyError(result.error))
      return false
    } else setErrors(undefined)
    return true
  }
  
const onSubmit = (ue: PartialUe) => {
   if (!validateForm(ue)) return
	 update()
}

Désormais nous pouvons accéder à nos erreurs comme ceci:

<p className='text-red-500'>{errors.properties.intitule.errors[0]}</p>

Dans notre cas le formulaire reste simple et nous pouvons nous contenter de cet usage. Toute fois, si vous souhaitez aller plus loin, consulter des librairies comme react-hook-form , formik … Avec ces librairies, nous n’aurions pas eu besoin de créer notre helper

En effet en entreprise il y a principalement deux cas: