-
Notifications
You must be signed in to change notification settings - Fork 0
Gestion des formulaires cotés clients
Au sein de l'application Otonom, les formulaires sont rendus cotés client afin d'avoir une meilleure expérience utilisateur avec des formulaires interactifs. Il permet aussi de minimiser la charge serveur par une validation coté client, ce qui épargne le serveur de requête non-conformes.
Les formulaires sont configurés à l'aide du hook useForm de react-hook-form
Le hook useForm permet de configurés les formulaires pour gérer les erreurs, la validation, etc..
Le hook nous renvoie toutes les fonctions nécessaires pour la gestion de formulaires.
Ces méthodes doivent être passés aux différents éléments que compose un formulaire.
Par exemple, les fonctions les plus importantes pour le fonctionnement du formulaire vont être:
-
handleSubmit: Execute la fonction de rappel passé en argument si les champs respectent le schema de validation -
control: Passé dans un Controller il permet de bind le composant render par celui-ci au contexte du formulaire - etc..
Les méthodes sont passés via un contexte par le biais du composant FormProvider, cela évite le props drilling.
Les méthodes sont récupérés au sein des composants de formulaire à l'aide du hook useFormContext.
Les composants tel que les inputs utilisent le composant Controller qui permet d'avoir un contrôle total de l'input contrôlé.
- LoginForm
- useLoginForm
- loginSchema
- InputControlled
- Button
Le hook useLoginForm contient toute la logique du formulaire, et retourne la configuration du formulaire avec toute ses méthodes.
Il utilise le hook useForm pour créer le contexte du formulaire, avec par exemple:
- Une validation de formulaire avec Zod
const methods = useForm<Schema>({
resolver: zodResolver(schema),
});
Il contient la fonction de rappel onSubmit qui sera passé en paramètre de la fonction handleSubmit.
react-hook-form@hookform/resolverszod