Site icon Blog ARC Optimizer

Comment créer un formulaire pas à pas dans KendoReact


Simplifiez votre formulaire complexe en le divisant en étapes moins fastidieuses. Suivez cet article pour créer un formulaire pas à pas efficace et convivial avec KendoReact.

Les formulaires sont l’une des meilleures méthodes pour collecter des informations auprès des utilisateurs. Qu’un site Web dispose d’un formulaire simple avec seulement quelques champs ou d’un formulaire complexe avec des dizaines de types de saisie, les formulaires conviviaux sont essentiels pour offrir une expérience exceptionnelle.

Cela peut être beaucoup plus difficile à réaliser lorsqu’il s’agit de formulaires complexes qui nécessitent que les utilisateurs saisissent beaucoup d’informations. Une solution efficace à ce problème est une forme pas à pas. Au lieu d’avoir un grand formulaire, les utilisateurs peuvent se voir présenter un formulaire en plusieurs étapes qui les guide à travers une séquence de saisies.

Dans cet article, nous expliquerons comment créer un tel formulaire pas à pas à l’aide de Progress KendoRéagir.

Configuration du projet

Vous pouvez trouver le code complet de ce tutoriel dans ce dépôt GitHub et dans l’exemple interactif Stackblitz ci-dessous.

Commençons par mettre en place un nouveau projet React. Nous utiliserons Vite pour cela. Exécutez les commandes suivantes dans votre terminal.

$ npm create vite@latest react-stepper-form -- --template react
$ cd react-stepper-form
$ npm install @progress/kendo-react-layout @progress/kendo-react-inputs @progress/kendo-react-form @progress/kendo-react-common @progress/kendo-react-labels @progress/kendo-svg-icons @progress/kendo-theme-material
$ npm run dev

Après avoir créé le projet, supprimez tous les styles de src/index.css et src/App.css des dossiers. Ensuite, modifions le Application composant pour supprimer le code initial inclus lors de l’échafaudage d’un projet React.

src/App.jsx

import "./App.css";
 
function App() {
  return (
    <>
      <div></div>
    </>
  );
}
 
export default App;

Enfin, ajoutons l’interface utilisateur de Kendo Thème matériel au projet. Nous le ferons en l’important dans le main.jsx déposer.

src/main.jsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "@progress/kendo-theme-material";
import "./index.css";
ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Voilà pour la configuration. Dans la section suivante, nous ajouterons la fonctionnalité pas à pas.

Configuration du moteur pas à pas

KendoReact se compose d’un certain nombre de bibliothèques qui fournissent divers éléments et composants d’interface utilisateur, tels que grilles, champs de formulaire, sélecteurs de dates, et plus. Le @progress/kendo-react-layout la bibliothèque offre un joli Pas à pas composant, que nous utiliserons pour indiquer à quelle étape du formulaire se trouve un utilisateur. De plus, nous profiterons de @progress/kendo-svg-icons bibliothèque et utilisez les icônes SVG qu’elle fournit sous la forme stepper.

Créons un composant appelé ProfileSetupForm. Nous utiliserons le Pas à pas composant pour afficher trois étapes :

  • Données personnelles – Collecter le nom et le prénom
  • Intérêts – Recueillir des informations sur les passe-temps de l’utilisateur
  • Compte – Collectez l’e-mail et le mot de passe

src/components/ProfileSetupForm.jsx

import { useState } from "react";
import { Stepper } from "@progress/kendo-react-layout";
import { userIcon, linkIcon, lockIcon } from "@progress/kendo-svg-icons";

const steps = [
  {
    label: "Personal Details",
    svgIcon: userIcon,
  },
  {
    label: "Interests",
    svgIcon: linkIcon,
  },
  {
    label: "Account",
    svgIcon: lockIcon,
  },
];
 
const ProfileSetupForm = () => {
  const [step, setStep] = useState(0);
  return (
    <div>
      <Stepper value={step} onChange={e => setStep(e.value)} items={steps} />
    </div>
  );
};
 
export default ProfileSetupForm;

Les principaux accessoires requis par le composant Stepper sont :

  • value – Étape actuelle
  • onChange – Gestionnaire, qui est appelé lorsque l’étape change ; il devrait mettre à jour l’état qui détient le value
  • items – Un tableau d’objets qui composent les étapes

Ensuite, importons et restituons le ProfileSetupForm composant dans le App.jsx déposer.

src/App.jsx

import "./App.css";
import ProfileSetupForm from "./components/ProfileSetupForm";
 
function App() {
  return (
    <div className="app">
      <ProfileSetupForm />
    </div>
  );
}
 
export default App;

Enfin, nous devons ajouter du CSS.

src/App.css

.app {
  max-width: 50rem;
  margin: 2rem auto;
}

Le GIF ci-dessous montre à quoi devrait ressembler le stepper.

Implémentation des étapes du formulaire

Implémenter un stepper pour afficher la progression du formulaire a été un jeu d’enfant avec le composant Stepper de KendoReact. Créons ensuite des composants pour chaque étape.

Notre formulaire comprendra trois étapes : informations personnelles, intérêts et détails du compte. Créons donc des fichiers de composants pour chacune. Nous profiterons de Field et FieldWrapper composants proposés par le @progress/kendo-react-form paquet et Input composant de @progress/kendo-react-inputs. Tout d’abord, créons le PersonalDetails.jsx déposer.

src/components/form-steps/PersonalDetails.jsx

import { Field, FieldWrapper } from "@progress/kendo-react-form";
import { Input } from "@progress/kendo-react-inputs";
const PersonalDetails = () => {
  return (
    <div>
      <FieldWrapper>
        <div className="k-form-field-wrap">
          <Field
            name={"firstName"}
            component={Input}
            labelClassName={"k-form-label"}
            label={"First name"}
          />
        </div>
      </FieldWrapper>
      <FieldWrapper>
        <div className="k-form-field-wrap">
          <Field
            name={"lastName"}
            component={Input}
            labelClassName={"k-form-label"}
            label={"Last name"}
          />
        </div>
      </FieldWrapper>
    </div>
  );
};
 
export default PersonalDetails;

Dans le PersonalDetails composant, nous avons deux entrées pour collecter le prénom et le nom de l’utilisateur. Ensuite, créons le Interests composant.

src/components/form-steps/Interests.jsx

import { Field, FieldWrapper } from "@progress/kendo-react-form";
import { Input } from "@progress/kendo-react-inputs";
 
const Interests = () => {
  return (
    <div>
      <FieldWrapper>
        <div className="k-form-field-wrap">
          <Field
            name="interests.movies"
            component={Input}
            labelClassName={"k-form-label"}
            label="Favourite Movie"
          />
        </div>
      </FieldWrapper>
      <FieldWrapper>
        <div className="k-form-field-wrap">
          <Field
            name="interests.books"
            component={Input}
            labelClassName={"k-form-label"}
            label="Favourite Book"
          />
        </div>
      </FieldWrapper>
      <FieldWrapper>
        <div className="k-form-field-wrap">
          <Field
            name="interests.games"
            component={Input}
            labelClassName={"k-form-label"}
            label="Favourite Game"
          />
        </div>
      </FieldWrapper>
      <FieldWrapper>
        <div className="k-form-field-wrap">
          <Field
            name="interests.activity"
            component={Input}
            labelClassName={"k-form-label"}
            label="Favourite Activity"
          />
        </div>
      </FieldWrapper>
    </div>
  );
};
 
export default Interests;

Ce composant comporte quatre champs, car nous voulons connaître le film, le livre, le jeu et l’activité préférés de l’utilisateur. Il est maintenant temps de passer à la dernière étape :AccountDetails.

src/components/form-steps/AccountDetails.jsx

import { Field, FieldWrapper } from "@progress/kendo-react-form";
import { Input } from "@progress/kendo-react-inputs";
 
const AccountDetails = () => {
  return (
    <div>
      <FieldWrapper>
        <div className="k-form-field-wrap">
          <Field
            name="email"
            type="email"
            component={Input}
            labelClassName={"k-form-label"}
            label="Email"
          />
        </div>
      </FieldWrapper>
      <FieldWrapper>
        <div className="k-form-field-wrap">
          <Field
            name="password"
            type="password"
            component={Input}
            labelClassName={"k-form-label"}
            label="Password"
          />
        </div>
      </FieldWrapper>
    </div>
  );
};
 
export default AccountDetails;

Le AccountDetails Le composant est composé d’entrées pour l’e-mail et le mot de passe.

Les composants de l’étape sont prêts, mettons donc à jour le ProfileSetupForm composant. Vous avez peut-être remarqué que nous n’avons utilisé aucun accessoire dans les composants de l’étape. La raison en est assez simple. KendoReact fournit Form et FormElement composants qui fonctionnent en combinaison avec le Field composant pour gérer l’état du formulaire. Voici la mise à jour ProfileSetupForm.jsx déposer.

src/components/ProfileSetupForm.jsx

import { useState } from "react";
import { Stepper } from "@progress/kendo-react-layout";
import { Form, FormElement } from "@progress/kendo-react-form";
import PersonalDetails from "./form-steps/PersonalDetails";
import Interests from "./form-steps/Interests";
import AccountDetails from "./form-steps/AccountDetails";
import { userIcon, linkIcon, lockIcon } from "@progress/kendo-svg-icons";

const steps = [
  {
    label: "Personal Details",
    svgIcon: userIcon,
  },
  {
    label: "Interests",
    svgIcon: linkIcon,
  },
  {
    label: "Account",
    svgIcon: lockIcon,
  },
];
 
const formStepComponent = {
  0: PersonalDetails,
  1: Interests,
  2: AccountDetails,
};
 
const ProfileSetupForm = () => {
  const [step, setStep] = useState(0);
  const FormStepComponent = formStepComponent[step];
  const isFirstStep = step === 0;
  const isLastStep = step === steps.length - 1;
 
  const onSubmitHandler = data => {
    console.log("SUBMIT", data);
    if (!isLastStep) {
      setStep(step => step + 1);
      return;
    }
    
  };
 
  return (
    <div>
      <h1 className="k-text-center k-mb-8">Profile Setup</h1>
      <Stepper value={step} onChange={e => setStep(e.value)} items={steps} />
 
      <Form
        onSubmit={onSubmitHandler}
        render={formRenderProps => {
          return (
            <FormElement
              className="k-display-flex k-flex-column k-justify-content-center k-ml-auto k-mr-auto k-mt-12"
              style={{
                width: "225px",
              }}
            >
              <FormStepComponent />
              <div className="k-form-buttons k-mt-8 k-w-full">
                <button
                  type="button"
                  className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-w-full"
                  disabled={isFirstStep}
                  onClick={() => {
                    setStep(step => step - 1);
                  }}
                >
                  Previous
                </button>
<button
                    type="submit"
                    className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-w-full"
                  >
                    {isLastStep ? "Submit" : "Next"}
                  </button>
              </div>
            </FormElement>
          );
        }}
      />
    </div>
  );
};
 
export default ProfileSetupForm;

Les composants de l’étape doivent être rendus via le Form Composants render soutenir. Cela permet à KendoReact de gérer l’état du formulaire pour nous. En plus de restituer le composant d’étape approprié, nous disposons également de deux boutons : « Précédent » et « Suivant/Soumettre ». Ce dernier modifie le texte en fonction de l’étape en cours. S’il s’agit de la dernière étape, le bouton affichera le texte « Soumettre ». Sinon, il affichera « Suivant ». Le GIF ci-dessous montre le formulaire stepper de travail.

Validation du formulaire pas à pas

Nous avons un formulaire pas à pas fonctionnel, mais nous devrions l’améliorer en ajoutant une validation. Nous rendrons obligatoires les champs prénom, nom, email et mot de passe.

Tout d’abord, créons un composant d’entrée personnalisé qui encapsulera le Input du @progress/kendo-react-inputs emballer. Notre composant personnalisé vérifiera s’il y a une erreur et affichera un message s’il y en a un.

src/components/form-steps/TextField.jsx

import { Input } from "@progress/kendo-react-inputs";
import { Error } from "@progress/kendo-react-labels";
 
const TextField = props => {
  const { validationMessage, visited, ...fieldProps } = props;
  return (
    <div className="k-form-field-wrap">
      <Input {...fieldProps} />
      {visited && validationMessage ? <Error>{validationMessage}</Error> : null}
    </div>
  );
};
 
export default TextField;

Ensuite, mettons à jour le PersonalDetails et AccountDetails composants pour utiliser le nouveau créé TextField composant.

src/components/form-steps/PersonalDetails.jsx

import { Field, FieldWrapper } from "@progress/kendo-react-form";
import TextField from "./TextField";
 
const isRequired = message => value => value ? "" : message;
 
const PersonalDetails = () => {
  return (
    <div>
      <FieldWrapper>
        <div className="k-form-field-wrap">
          <Field
            name={"firstName"}
            component={TextField}
            labelClassName={"k-form-label"}
            label={"First name"}
            validator={isRequired("First name is required")}
          />
        </div>
      </FieldWrapper>
      <FieldWrapper>
        <div className="k-form-field-wrap">
          <Field
            name={"lastName"}
            component={TextField}
            labelClassName={"k-form-label"}
            label={"Last name"}
            validator={isRequired("Last name is required")}
          />
        </div>
      </FieldWrapper>
    </div>
  );
};
 
export default PersonalDetails;

En plus de changer le composant, nous avons également ajouté le validator soutenir. Désormais, lorsqu’un utilisateur tente de passer à l’étape suivante sans remplir les conditions de validation, des messages d’erreur s’afficheront jusqu’à ce que l’utilisateur corrige les problèmes.

Mettons également à jour le AccountDetails composant et ajoutez des validateurs pour les champs d’e-mail et de mot de passe.

src/components/form-steps/AccountDetails.jsx

import { Field, FieldWrapper } from "@progress/kendo-react-form";
import TextField from "./TextField";
const emailRegex = new RegExp(/\S+@\S+\.\S+/);
const emailValidator = value =>
  emailRegex.test(value) ? "" : "Please enter a valid email.";
 
const passwordValidator = value => {
  if (!value) {
    return "Password is required.";
  }
 
  if (value.length < 8) {
    return "Password must have minimum 8 characters";
  }
 
  return "";
};
 
const AccountDetails = () => {
  return (
    <div>
      <FieldWrapper>
        <div className="k-form-field-wrap">
          <Field
            name="email"
            type="email"
            component={TextField}
            labelClassName={"k-form-label"}
            label="Email"
            validator={emailValidator}
          />
        </div>
      </FieldWrapper>
      <FieldWrapper>
        <div className="k-form-field-wrap">
          <Field
            name="password"
            type="password"
            component={TextField}
            labelClassName={"k-form-label"}
            label="Password"
            validator={passwordValidator}
          />
        </div>
      </FieldWrapper>
    </div>
  );
};
 
export default AccountDetails;

C’est ça. Le GIF ci-dessous montre à quoi devrait ressembler le formulaire pas à pas avec la logique de validation.

Conclusion

Dans cet article, nous avons exploré comment créer un formulaire pas à pas dans React à l’aide de la bibliothèque KendoReact. Cette approche simplifie les formulaires complexes et améliore l’expérience utilisateur en divisant les formulaires volumineux en sections plus petites et plus faciles à suivre, moins susceptibles de submerger les utilisateurs. En suivant ces étapes, vous pouvez créer un formulaire pas à pas efficace et convivial pour vos applications Web.

Essayez KendoReact

Le meilleur outil 2023 pour ta croissance Instagram !



Source link
Quitter la version mobile