L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Formulaires et validation dans Ionic React
Ionic Framework est une boîte à outils d'interface utilisateur pour créer des applications mobiles multiplateformes en HTML , CSS et JavaScript. La sortie d'Ionic 5 au début de 2020 était accompagnée d'un support officiel de React, permettant aux développeurs de React de créer facilement des applications mobiles à l'aide de leurs outils préférés. Cependant, il n'y a pas beaucoup de support pour travailler avec des formulaires, et la plupart des bibliothèques existantes disponibles pour créer des formulaires dans l'écosystème React ne fonctionnent pas bien avec les composants de Ionic Framework.
Vous apprendrez à créer des formulaires à l'aide de l'interface utilisateur d'Ionic React composants d'entrée dans ce didacticiel. Vous apprendrez également à utiliser une bibliothèque pour vous aider à détecter les modifications des entrées de formulaire et à répondre aux règles de validation. Enfin, vous apprendrez à rendre vos formulaires accessibles aux lecteurs d’écran en ajoutant du texte utile aux attributs ARIA de vos entrées.
Composants de formulaire Ionic
Les formulaires sont aujourd'hui une partie importante de la plupart des applications Web et mobiles. Que vous autorisiez l'accès à des parties restreintes de votre application via l'enregistrement des utilisateurs et les formulaires de connexion ou la collecte des commentaires de vos utilisateurs, vous devez – à un moment donné du cycle de vie de votre application – créer un formulaire.
Ionic fournit des composants prédéfinis pour travailler avec formes – dont certaines incluent IonItem IonLabel IonInput IonCheckbox et IonRadio . Nous pouvons combiner ces composants pour créer des formulaires d'aspect standard sans ajouter de style nous-mêmes.
Par exemple, le code suivant:
Nous donnera un formulaire de connexion qui ressemble à ceci:
Prêt à l'emploi, les composants du formulaire Ionic ont fière allure sur iOS ou Android, mais ils peuvent être un peu compliqués si vous travaillez avec React. Comme pour la plupart des outils de l'écosystème React, vous devez décider de la manière dont vous voulez construire vos formulaires en termes de fonctionnalité et d'accessibilité – tous deux aussi importants que la conception.
Bien qu'il existe déjà tant d'aides de formulaire React disponibles parmi lesquels choisir, la plupart d'entre eux ne fonctionnent pas avec les composants de formulaire Ionic. Je soupçonne que la raison principale en est que l'événement déclenché lorsqu'une valeur de champ change dans Ionic est onIonChange alors que la plupart des bibliothèques de formulaires existantes écoutent onChange .
Forme de crochet de réaction: bibliothèque de formulaires de réaction petite et rapide
Heureusement, tout n'est pas sombre. Je suis récemment tombé sur React Hook Form (RHF), une bibliothèque pour travailler avec des formulaires dans des projets React. Il fournit un support pour les composants contrôlés ou non contrôlés et la validation d'entrée, et l'API est basée sur des hooks, donc elle ne fonctionne qu'avec des composants fonctionnels.
La fonctionnalité la plus attrayante pour les développeurs Ionic React – à mon avis – est le composant wrapper onChangeName qui peut être utilisée pour spécifier le nom d'événement de changement pour toute instance de composant que vous lui transmettez. Je vais vous montrer comment cela facilite le travail avec les formulaires dans Ionic dans les sections suivantes.
Création d’un formulaire d’inscription
Voyons comment RHF nous aide avec la fonctionnalité de formulaire lorsque nous construisons un formulaire d’enregistrement dans Ionic. Si vous exécutez la dernière version de la CLI Ionic (exécutez npm i -g @ ionic / cli pour confirmer), démarrez une nouvelle application Ionic avec React en exécutant la commande suivante:
ionic start myApp blank --type = react J'ai utilisé un modèle vierge ici. Vous devriez pouvoir réécrire vos formulaires existants pour utiliser facilement la bibliothèque React Hook Form, en particulier si vos composants sont écrits en tant que composants fonctionnels.
Remarque: Vous devez supprimer le ExploreContainer et son importation dans Home.tsx avant de poursuivre ce didacticiel.
Pour démarrer avec votre formulaire, installez le package React Hook Form en exécutant la commande suivante dans le répertoire racine de votre projet:
yarn add react-hook-form Cela rendra la bibliothèque React Hook Form disponible dans votre projet. Créons un champ de saisie de formulaire à l’aide de la bibliothèque. Ouvrez le fichier Home.tsx et remplacez son contenu par ce qui suit:
import {IonContent, IonPage, IonText, IonItem, IonLabel, IonInput, IonButton} de "@ ionic / react";
importer React depuis "react";
import "./Home.css";
import {Controller, useForm} de 'react-hook-form';
const Accueil: React.FC = () => {
const {control, handleSubmit} = useForm ();
const registerUser = (données) => {
console.log ('création d'un nouveau compte utilisateur avec:', données);
}
revenir (
Créer un compte
);
};
Exporter la page d'accueil par défaut; Cela vous donne un formulaire avec un seul champ pour collecter une adresse e-mail. Décomposons les parties importantes (mises en évidence dans le bloc de code).
Premièrement, nous déstructurons la valeur de retour du hook useForm () de RHF. handleSubmit transmet les valeurs de votre entrée à la fonction de gestionnaire que vous spécifiez lorsque le formulaire passe la validation. control est un objet contenant les méthodes utilisées pour enregistrer les composants contrôlés dans RHF.
Ensuite, nous avons un bloc d'élément de formulaire standard, mais contrairement à l'exemple du formulaire de connexion, nous passons le IonInput au composant RHF onChangeName prop sur le nom d'événement de changement de Ionic et définissez le prop control sur l'objet de contrôle de l'invocation de useForm () .
C'est bien jusqu'à présent, mais vous pourriez vous retrouver à répéter presque le même code encore et encore. Vous pouvez essayer de créer un composant d'entrée réutilisable qui crée un champ d'entrée avec des propriétés données.
Créez un fichier dans le répertoire src / components nommé Input.tsx et ajoutez le code suivant au fichier:
import React, {FC} from "react";
importer {IonItem, IonLabel, IonInput} depuis "@ ionic / react";
import {Controller, Control} de "react-hook-form";
interface d'exportation InputProps {
nom: chaîne;
contrôle?: Contrôle;
label?: chaîne;
composant?: JSX.Element;
}
const Entrée: FC = ({
Nom,
contrôle,
composant,
étiquette,
}) => {
revenir (
<>
{étiquette && (
{étiquette}
)}
<Contrôleur
comme = {composant ??
);
};
export default Input; Ce composant reçoit un nom prop et une commande facultative component et label props et rend un champ d'entrée en utilisant les composants de forme ionique introduits précédemment. Cela réduit la quantité de code à écrire lors de la création de champs de saisie de formulaire. Vous pouvez terminer le reste de votre formulaire en utilisant ce composant. Modifiez le fichier Home.tsx avec les modifications suivantes:
import {IonContent, IonPage, IonText, IonInput, IonButton, IonCheckbox, IonItem, IonLabel} de "@ ionic / react";
importer React depuis "react";
import "./Home.css";
import {useForm} depuis "react-hook-form";
importer l'entrée, {InputProps} de "../components/Input";
const Accueil: React.FC = () => {
const {control, handleSubmit} = useForm ();
const formFields: InputProps [] = [
{
nom: "email",
composant:
Créer un compte
);
};
export default Home; Avec votre configuration jusqu'à présent, vous avez un tableau des champs de saisie de votre formulaire ( nom est la seule propriété requise), chaque champ étant rendu à l'aide de Input composant de plus tôt. Vous pouvez aller encore plus loin et avoir vos données de champ dans un fichier JSON, en gardant le code dans vos composants avec des formulaires propres. À ce stade, votre application (exécutée sur http: // localhost: 8100 avec la commande ionic serve ) devrait ressembler à ceci:
Et la validation des champs?
Vous avez peut-être remarqué que les champs de saisie de notre formulaire n'ont pas encore de logique de validation. S'il s'agissait d'une application destinée à une utilisation dans le monde réel, cela pourrait entraîner de nombreux effets indésirables à moins que votre API ne soit configurée pour valider les données entrantes. Soit dit en passant, votre API doit toujours valider les données entrantes.
RHF est livré avec une validation qui s'aligne sur la norme HTML intégrée pour la validation de formulaire. Cela fonctionne très bien pour une validation simple comme rendre un champ obligatoire ou définir des longueurs de champ minimum et maximum. Si vous souhaitez utiliser la logique de validation complexe je vous recommande d'utiliser Yup . Bien que vous puissiez utiliser n'importe quelle bibliothèque de validation de schéma d'objet, RHF prend en charge Yup prêt à l'emploi.
Exécutez la commande suivante pour installer la bibliothèque (et les typages):
yarn add yup @ types / yup Ensuite, ajoutez ceci aux importations de votre composant:
import {object, string} from 'yup';
const Home: React.FC = () => {...} Ensuite, ajoutez le code suivant en haut de votre composant:
const Home: React.FC = () => {
const validationSchema = object (). shape ({
email: string (). required (). email (),
fullName: chaîne (). requis (). min (5) .max (32),
mot de passe: string (). required (). min (8),
});
// ...
} Ici, nous avons créé un schéma d'objet et ajouté des règles de validation à chaque propriété en utilisant yup . Les noms de l'objet doivent correspondre aux noms des balises d'entrée de votre formulaire, sinon vos règles ne seront pas déclenchées.
Enfin, mettez à jour votre hook useForm () pour utiliser le schéma que nous avons défini en définissant la propriété validationSchema comme ceci:
const {control, handleSubmit} = useForm ({
validationSchema,
}); Désormais, lorsque vous cliquez sur le bouton d'envoi, le gestionnaire handleSubmit n'est pas appelé et les données du formulaire ne sont pas soumises. Bien que ce soit exactement ce que nous voulions, il semble qu'il n'y ait aucun moyen pour l'utilisateur de savoir ce qui se passe. Corrigeons cela en affichant des conseils de texte lorsqu'un champ n'est pas rempli correctement.
Tout d'abord, mettez à jour le composant Input pour qu'il ressemble à ce qui suit:
import React, {FC} from "react" ;
importer {IonItem, IonLabel, IonInput, IonText} depuis "@ ionic / react";
importez {Controller, Control, NestDataObject, FieldError} depuis "react-hook-form";
interface d'exportation InputProps {
nom: chaîne;
contrôle?: Contrôle;
label?: chaîne;
composant?: JSX.Element;
erreurs?: NestDataObject <Record FieldError>;
}
const Entrée: FC = ({
Nom,
contrôle,
composant,
étiquette,
les erreurs,
}) => {
revenir (
<>
{label && {label} }
<Contrôleur
comme = {composant ??
{erreurs && erreurs [name] && (
{erreurs [name] .message}
)}
);
};
export default Input; Ici, nous avons mis à jour notre composant pour recevoir une propriété facultative supplémentaire qui est l'objet d'erreur de RHF, et nous affichons un message d'erreur dans le champ d'entrée renvoyé chaque fois qu'il y a une erreur. Une dernière chose, ajoutez l'objet errors à votre objet déstructuré et mettez à jour le composant dans votre boucle:
const {control, handleSubmit, errors} = useForm ({
validationSchema,
}); {formFields.map ((champ, index) => (
))} 
Vos formulaires fournissent désormais des repères visuels lorsqu'un utilisateur ne fait pas quelque chose de bien. Yup vous permet de modifier le message d'erreur. Vous pouvez le faire en transmettant une chaîne à la méthode de validation que vous utilisez. Pour le courrier électronique, par exemple, vous pouvez effectuer les opérations suivantes:
{
email: chaîne ()
.email ('Veuillez fournir une adresse e-mail valide')
.required ('Ceci est un champ obligatoire'),
} Amélioration de l’accessibilité
Les composants de Ionic sont généralement des wrappers sur l’élément natif correspondant, ce qui signifie qu’ils acceptent la plupart - sinon la totalité - des attributs existants de cet élément. Vous pouvez améliorer vos champs de saisie et les rendre plus accessibles aux utilisateurs malvoyants en définissant les attributs ARIA avec le texte approprié.
Pour continuer avec notre exemple de formulaire d'inscription, ouvrez le fichier Input.tsx et apportez les modifications suivantes:
import Réagir, {FC} de "réagir";
importer {IonItem, IonLabel, IonInput, IonText} depuis "@ ionic / react";
importez {Controller, Control, NestDataObject, FieldError} depuis "react-hook-form";
interface d'exportation InputProps {
nom: chaîne;
contrôle?: Contrôle;
label?: chaîne;
composant?: JSX.Element;
erreurs?: NestDataObject <Record FieldError>;
}
const Entrée: FC = ({
Nom,
contrôle,
composant,
étiquette,
les erreurs,
}) => {
revenir (
<>
{label && {label} }
<Contrôleur
comme = {
composant ?? (
{erreurs && erreurs [name] && (
{erreurs [name] .message}
)}
);
};
Exporter l'entrée par défaut; Le composant par défaut IonInput que nous transmettons au Controller inclut désormais un attribut aria-invalid pour indiquer si le champ contient une erreur et un attribut aria-describedby pour pointer vers le message d'erreur correspondant. Le message d'erreur est maintenant encapsulé avec un span dont le rôle ARIA est défini sur «error». Désormais, lorsque votre champ contient une erreur, un lecteur d'écran le mettra en évidence et lira le message d'erreur.
Conclusion
Félicitations! Vous avez appris à créer et valider des formulaires lors de la création d'applications multiplateformes à l'aide d'Ionic. Vous avez également vu à quel point il est facile de rendre vos champs de saisie accessibles aux utilisateurs malvoyants. Espérons que ce didacticiel fournit une plate-forme solide que vous pouvez utiliser lors de la création de formulaires dans vos applications Ionic React. Il existe d'autres composants pour la création de formulaires (tels que select et radios) que nous n'avons pas explorés dans ce didacticiel, mais vous pouvez trouver et en savoir plus à leur sujet dans la documentation officielle.
Références
(ks, ra, yk, il) Source link