Comment construire des formulaires dans React en utilisant React Hook Form

Construire des formulaires dans une application React peut être complexe et prendre du temps. Avec l’aide de la bibliothèque React Hook Form, vous pouvez facilement ajouter des formulaires performants à votre application React.

React Hook Form est une bibliothèque de construction de formulaires dans React qui simplifie le processus de création de formulaires complexes et réutilisables. Si vous cherchez à construire une application React, vous devriez apprendre à construire des formulaires dans React à l’aide de la bibliothèque React Hook Form.

Installation de React Hook Form

Pour commencer à utiliser React Hook Form, vous devez l’installer à l’aide des gestionnaires de paquets npm ou yarn.

Pour installer React Hook Form à l’aide de npm, exécutez la commande suivante dans votre terminal :

Pour installer React Hook Form à l’aide de yarn, exécutez la commande suivante :

Création d’un formulaire à l’aide de React Hook Form

Pour créer un formulaire à l’aide de React Hook Form, vous devez utiliser la commande useForm hook. Le crochet useForm vous donne accès aux méthodes et propriétés que vous utiliserez pour construire et gérer vos formulaires dans votre application React.

Voici un exemple montrant comment utiliser le hook useForm pour l’utilisation du crochet :

La bibliothèque React Hook Form utilise l’option enregistrer pour enregistrer vos valeurs d’entrée dans le crochet. La méthode register connecte les champs de saisie d’un formulaire à la bibliothèque React Hook Form afin que la bibliothèque puisse suivre et valider les champs de saisie.

Dans le bloc de code ci-dessus, vous enregistrez une entrée avec le nom « firstname ». Le handleSubmit de la bibliothèque React Hook Form gère la soumission du formulaire.

Pour gérer la soumission du formulaire, vous passerez la fonction de rappel onSubmit à la fonction handleSubmit . La méthode onSubmit recevra un objet contenant les valeurs de toutes les entrées du formulaire.

Valider les entrées avec la méthode Register

La fonction registre vous permet de définir des règles de validation pour vos champs de saisie. Pour ajouter la validation à vos champs de saisie, vous transmettez un objet contenant des règles de validation en tant que deuxième argument de la méthode register comme deuxième argument de la méthode register .

Comme suit :

Dans cet exemple, vous ajoutez une règle de validation au champ de saisie « prénom » et deux règles de validation au champ de saisie « mot de passe ». Les règles de validation sont les suivantes requises spécifie que l’utilisateur doit remplir les champs de saisie et qu’il ne peut pas soumettre le formulaire si les champs sont vides.

La règle maxlength fixe le nombre maximal de lettres alphabétiques de la valeur d’entrée. Outre la règle requis et longueur maximale vous pouvez ajouter d’autres règles de validation, telles que min, max, minLongueur, modèle et valider.

min & max

Les min spécifie la valeur minimale d’un champ de saisie et la règle max spécifie sa valeur maximale.

Vous pouvez utiliser la règle min et max avec des entrées de type numérique, comme ceci :

La valeur du champ de saisie ci-dessus doit être au moins égale à 18 et au plus égale à 35.

minLength

La valeur du champ de saisie ci-dessus doit être au moins égale à 18 et au plus égale à 35. minLongueur est similaire à la règle maxLength mais fixe le nombre minimum de lettres alphabétiques :

Dans cet exemple, la règle minLength spécifie que la valeur de l’entrée doit comporter au moins 10 caractères.

modèle & valider

Les modèle spécifie un motif d’expression régulière auquel la valeur d’entrée doit correspondre. La règle valider vous permet de définir une fonction de validation personnalisée pour valider la valeur d’entrée. La fonction doit renvoyer soit vrai soit un message d’erreur sous forme de chaîne.

Par exemple :

Dans cet exemple, l’entrée « prénom » utilise la fonction modèle règle. La règle modèle exige que la valeur d’entrée ne contienne que des caractères alphabétiques (majuscules et minuscules).

L’entrée « test » utilise le motif valider pour définir une fonction de validation personnalisée qui vérifie si sa valeur est inférieure ou égale à 12.

Gestion des erreurs dans votre formulaire

La bibliothèque React Hook Form fournit un mécanisme intégré pour gérer les erreurs JavaScript dans vos formulaires. Les handleSubmit appelée lorsque l’utilisateur soumet le formulaire, renvoie une promesse qui se résout avec les données du formulaire si la validation est réussie.

Cependant, en cas d’erreur de validation, la promesse est rejetée avec un objet error qui contient les erreurs de validation.

Voici un exemple de gestion des erreurs à l’aide de l’objet handleSubmit :

Dans ce bloc de code, la fonction formState accède aux erreurs de chaque champ. L’objet erreurs stocke les erreurs de validation pour chaque champ de saisie. L’objet erreurs affiche un message d’erreur pour chaque champ invalide.

Pour l’objet prénom si le champ de saisie requis n’est pas respectée, un message d’erreur – « Veuillez saisir votre prénom » – s’affiche à côté du champ de saisie. Si la valeur de la règle âge est en dehors de la plage autorisée, un message d’erreur s’affiche.

Si la valeur est inférieure à 18, le message d’erreur sera « Vous êtes trop jeune pour ce site », et si la valeur est supérieure à 35, le message d’erreur sera « Vous êtes trop vieux pour ce site ».

Vous pouvez maintenant construire des formulaires fiables en React

Construire des formulaires dans React peut être un processus complexe et chronophage. Pourtant, React Hook Form simplifie cette tâche en fournissant une bibliothèque facile à utiliser et flexible pour gérer les données et la validation des formulaires.

Avec l’aide du crochet useForm, de la méthode register et de la méthode handleSubmit, la construction de formulaires dans React devient un processus plus efficace et rationalisé. Vous pouvez créer des formulaires fonctionnels, améliorant à leur tour l’expérience utilisateur et la qualité globale de vos applications React.

S’abonner à notre newsletter