Créer facilement des formulaires React à l'aide de React Hook Form, Zod et Shadcn

Les formulaires sont quelque chose que tous les développeurs rencontrent, que ce soit en tant qu'utilisateur ou côté développeur. Ils sont essentiels sur la plupart des sites Web, mais leur complexité peut varier considérablement : du simple formulaire de contact à 3 champs au giga-monstre-t-rex, en passant par des formulaires multipages avec 150 champs, une validation dynamique et des contrôles asynchrones.

Dans cet article, nous explorerons comment React Hook Form, Zod et Shadcn peuvent être utilisés pour créer une solution adaptable et conviviale pour les développeurs qui gère facilement un large éventail d'exigences de formulaire.

Le formulaire que nous allons construire

Voici le formulaire que nous allons développer dans cet article. J'ai l'intention d'écrire un autre article sur une utilisation avancée des formulaires qui sera encore plus complexe en guise de suivi, alors restez à l'écoute ?

Rencontrez les outils

Regardons la pile que nous utiliserons pour créer et gérer nos formulaires.

Réagir et Guêpe

• Framework : Wasp (framework full-stack pour React, Node.js et Prisma).
• Permet un développement et un déploiement Web full-stack rapides et efficaces avec React.

Formulaire de crochet de réaction

• Bibliothèque légère pour créer des formulaires dans React, principalement via son hook useForm.
• Gère la validation des formulaires, la gestion des erreurs et propose une méthode de validation flexible et une intégration avec diverses bibliothèques de composants d'interface utilisateur.

Zod

• Bibliothèque de validation TypeScript-first pour créer des schémas de validation détaillés et réutilisables.
• S'intègre aux types TypeScript pour maintenir la validation unifiée et éviter la duplication.

Shadcn/UI

• Collection de composants d'interface utilisateur réutilisables qui sont intégrés directement dans le projet, ce qui permet aux développeurs de prendre uniquement ce dont ils ont besoin et de personnaliser également ces composants.
• Offre une prise en charge intégrée pour React Hook Form et Zod.

Voici un exemple d'extrait présentant un champ de formulaire dans la bibliothèque Shadcn :

<FormField
  control={form.control}
  name="name"
  render={({ field }) => (
    <FormItem>
      <FormLabel>Name</FormLabel>
      <FormControl>
        <Input {...field} />
      </FormControl>
      <FormMessage />
    </FormItem>
  )}
/>

Même si vous préférez utiliser une version différente de la pile, tant que vous vous en tenez à React et RHF, cela reste un exemple valable qui vous permettra de démarrer.

Créons un tableau de bord utilisateur simple

L'application que nous utiliserons pour démontrer les formulaires de base est un panneau d'administration avec les opérations CRUD essentielles. Il comprendra l'authentification par e-mail et par mot de passe et se composera de deux pages : un écran principal affichant un tableau de tous les utilisateurs, et une page de création d'utilisateurs, qui sera la star de cet article.

Notre formulaire inclura une validation pour garantir que les utilisateurs ne peuvent pas le soumettre (c'est-à-dire créer un nouvel utilisateur) sans répondre aux exigences spécifiées. L'objet User est un excellent candidat pour les exemples de validation, car il contient une variété de types de données adaptés à différentes validations : chaînes, dates (par exemple, date de naissance), chaînes de courrier électronique et booléens (par exemple, statut d'utilisateur premium). Le fichier de schéma Prisma complet est présenté ci-dessous.

<FormField
  control={form.control}
  name="name"
  render={({ field }) => (
    <FormItem>
      <FormLabel>Name</FormLabel>
      <FormControl>
        <Input {...field} />
      </FormControl>
      <FormMessage />
    </FormItem>
  )}
/>

Pour relancer notre projet, nous utiliserons un modèle Wasp prédéfini avec TypeScript, appelé todo-ts. Ce modèle est livré avec des composants prêts à l'emploi et un routage pour l'authentification, y compris des écrans de connexion et d'inscription. Il offre également un exemple solide du fonctionnement des opérations CRUD dans Wasp, idéal si vous êtes nouveau dans le framework. De plus, nous exploiterons le nouveau SDK Wasp TypeScript pour gérer notre configuration, car il offre une flexibilité étendue pour la personnalisation.

Vous trouvez cet article utile ?

L'équipe Wasp travaille dur pour créer un contenu comme celui-ci, sans parler de la création d'un framework React/NodeJS moderne et open source.

Le moyen le plus simple de montrer votre soutien est simplement de mettre en vedette le repo Wasp ! ? Mais il serait grandement apprécié que vous puissiez jeter un œil au référentiel (pour des contributions, ou simplement pour tester le produit). Cliquez sur le bouton ci-dessous pour donner une étoile à Wasp et montrer votre soutien !

⭐️ Merci pour votre soutien ?

Rassembler le tout - Disposition de l'instance du schéma Zod React Hook Form

Pour travailler avec des formulaires, nous allons commencer par définir un schéma de validation Zod. Notre formulaire comporte trois types de données : des chaînes, une date et un booléen. Nous appliquerons la validation à la plupart des champs : le nom et le prénom sont obligatoires, tandis que le courrier électronique utilise la validation de courrier électronique intégrée. Zod simplifie la validation des types de chaînes courants avec des validations intégrées pour différents types, comme les e-mails, les URL et les UUID, ce qui est utile pour notre champ d'e-mail.

Pour des validations supplémentaires, la date ne peut pas être définie sur une date ultérieure et le champ premiumUser doit simplement être un booléen. Zod fournit également des messages d'erreur de validation par défaut, mais ceux-ci peuvent être personnalisés. Par exemple, au lieu de nom : z.string().min(1), nous pourrions spécifier nom : z.string().min(1, 'Le nom est requis').

<FormField
  control={form.control}
  name="name"
  render={({ field }) => (
    <FormItem>
      <FormLabel>Name</FormLabel>
      <FormControl>
        <Input {...field} />
      </FormControl>
      <FormMessage />
    </FormItem>
  )}
/>

Notre formulaire est géré par le hook useForm de React Hook Form, qui fournit des options étendues pour gérer et valider les valeurs du formulaire, vérifier les erreurs et gérer l'état du formulaire. Pour intégrer notre schéma de validation Zod, nous utiliserons un résolveur Zod, permettant à React Hook Form d'appliquer les validations que nous avons définies précédemment.

Les valeurs par défaut du formulaire sont dérivées de l'objet client. Étant donné que ce composant est utilisé à la fois pour ajouter de nouveaux clients et pour modifier ceux existants, nous transmettrons les données nécessaires en entrée. Pour un nouveau client, certaines valeurs par défaut raisonnables sont utilisées ; pour les clients existants, les données sont récupérées de la base de données. Outre la définition des valeurs par défaut et la détermination d'appeler createCustomer ou updateCustomer, tous les autres aspects de la gestion des formulaires restent les mêmes.

model Customer {
  id    Int    @id @default(autoincrement())
  name  String
  surname String
  email String
  dateOfBirth DateTime
  premiumUser Boolean
}

La dernière étape consiste à créer le formulaire lui-même et à l'assembler dans le fichier TSX. Comme indiqué précédemment, ce processus est simple. Que nous utilisions des saisies de texte, des sélecteurs de date ou des cases à cocher avec des contrôles Shadcn, nous suivons une structure similaire :

• Commencez par créer l'élément FormField et définissez ses propriétés de contrôle, de nom et de rendu.
• La propriété render est clé, car elle contient l'élément form lui-même.
• En général, nous enveloppons tout dans FormItem, ajoutons un FormLabel pour l'étiquette et plaçons l'élément de formulaire contrôlé dans FormControl avec la valeur et la méthode de définition appropriées.
• Enfin, nous incluons FormMessage ci-dessous, qui affiche le message de validation Zod si la validation échoue.

  const formSchema = z.object({
    name: z.string().min(1, { message: 'Name is required' }),
    surname: z.string().min(1, { message: 'Surname is required' }),
    email: z.string().email({ message: 'Invalid email address' }),
    dateOfBirth: z
      .date()
      .max(new Date(), { message: 'Date cannot be in the future' }),
    premiumUser: z.boolean(),
  });

Si vous êtes curieux de voir l'application terminée, consultez le référentiel GitHub ici : GitHub Repo. J'espère que cet article a facilité l'utilisation des formulaires, et si vous êtes intéressé par davantage de contenu lié aux formulaires, restez à l'écoute pour la deuxième partie ! Dans la partie suivante, nous aborderons les modèles avancés et les techniques de validation pour améliorer vos applications.

Veuillez envisager de mettre en vedette Wasp sur GitHub si vous avez aimé cet article ! Votre soutien nous aide à continuer à rendre le développement Web plus facile et plus fluide pour tout le monde. ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!