Un guide simple / Blogs / Perficient

La gestion des formulaires dans React peut devenir délicate, en particulier lors de la gestion d’états et de validations complexes. Formik est une bibliothèque populaire qui simplifie cela en gérant facilement les états des formulaires, les validations et les soumissions. Dans ce guide, nous explorerons comment configurer un formulaire de base à l’aide de Formik.

Qu’est-ce que Formik ?

Formik est une petite bibliothèque pour les formulaires React. Il permet de gérer l’état et la validation des formulaires, facilitant ainsi la création de formulaires fiables et maintenables. En utilisant Formik, vous pouvez gérer une logique de formulaire complexe sans encombrer vos composants avec du code de gestion d’état.

Mise en place de Formik : Tout d’abord, installez Formik dans votre projet :

npm install formik

Ensuite, importez Formik et les composants nécessaires dans votre fichier :

import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup'; // for validation

Créer un formulaire simple

Créons un formulaire d’inscription simple avec des champs pour le nom, l’e-mail et le mot de passe.

Étape 1 : Configurer Formik avec les valeurs initiales

Définissez les valeurs initiales des champs du formulaire à l’aide de la prop initialValues ​​dans le composant Formik :

<Formik
initialValues={{
name: '',
email: '',
password: ''
}}>

Étape 2 : Ajouter une validation avec Yup

Oui, c’est une bibliothèque de validation couramment utilisée avec Formik. Vous pouvez définir un schéma de validation pour vos champs de formulaire en utilisant Yup :

const validationSchema = Yup.object({
name: Yup.string().required('Name is required'),
email: Yup.string().email('Invalid email address').required('Email is required'),
password: Yup.string()
.min(6, 'Password must be at least 6 characters')
.required('Password is required')
});

Étape 3 : Implémenter les champs du formulaire et afficher les erreurs

À l’aide de Formik, vous pouvez utiliser le composant Field pour les entrées et ErrorMessage pour afficher les erreurs de validation.

<Formik
initialValues={{name: '',email: '',password: ''}}
validationSchema={validationSchema}
onSubmit={(values) => {
console.log(values);
}}>
<Form>
<label htmlFor="name">Name</label>
<Field name="name" type="text" />
<ErrorMessage name="name" component="div" />

<label htmlFor="email">Email</label>
<Field name="email" type="email" />
<ErrorMessage name="email" component="div" />

<label htmlFor="password">Password</label>
<Field name="password" type="password" />
<ErrorMessage name="password" component="div" />

<button type="submit">Submit</button>
</Form>
</Formik>

Code complet

Voici le code complet avec plus de validation pour le formulaire d’inscription :

import React from "react";
import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";

const SignupForm = () => {
const validationSchema = Yup.object({
name: Yup.string()
.min(3, "Name must be at least 3 characters")
.max(50, "Name can be at most 50 characters")
.required("Name is required")
.matches(/^[A-Za-z\s]+$/, "Name should only contain letters and spaces"),

email: Yup.string()
.email("Invalid email address")
.required("Email is required")
.matches(
/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,"Email must be a valid format"),

password: Yup.string()
.min(8, "Password must be at least 8 characters")
.max(20, "Password can be at most 20 characters")
.required("Password is required")
.matches(
/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$!%*?&]{8,20}$/,
"Password must contain at least one letter, one number, and be 8-20 characters long"
),
});

return (
<Formik
initialValues={{name: "",email: "",password: "",}}
validationSchema={validationSchema}
onSubmit={(values) => {
console.log(values);
}}>
<Form>
<label htmlFor="name">Name</label>
<Field name="name" type="text" />
<ErrorMessage name="name" component="div" />

<label htmlFor="email">Email</label>
<Field name="email" type="email" />
<ErrorMessage name="email" component="div" />

<label htmlFor="password">Password</label>
<Field name="password" type="password" />
<ErrorMessage name="password" component="div" />

<button type="submit">Submit</button>
</Form>
</Formik>
);
};

export default SignupForm;

## Pour des informations plus approfondiesconsultez le fonctionnaire [Formik documentation].

Conclusion

Formik offre un moyen simple de gérer les formulaires dans React, simplifiant ainsi la gestion et la validation des états. En le combinant avec Yup, vous pouvez créer des formulaires robustes avec un minimum d’effort. Essayez-le dans votre prochain projet React pour découvrir la différence !