Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Angular
Code

Introduction aux formulaires dans Angular 4: Formulaires pilotés par un modèle

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Introduction to Forms in Angular 4.
Introduction to Forms in Angular 4: Reactive Forms

French (Français) translation by honeymmmm (you can also view the original English article)

Final product image
What You'll Be Creating

Les formulaires sont essentiels à toute application frontale moderne et sont une fonctionnalité que nous utilisons tous les jours, même si nous ne le réalisons pas. Des formulaires sont requis pour la connexion sécurisée d'un utilisateur à l'application, la recherche de tous les hôtels disponibles dans une ville donnée, la réservation d'un taxi, la création d'une liste de tâches et l'exécution de nombreuses tâches habituelles. Certains formulaires ne contiennent que quelques champs de saisie, tandis que d'autres peuvent avoir un tableau de champs qui s'étend sur deux ou trois pages.

Dans ce tutoriel, nous parlerons des différentes stratégies disponibles pour développer des formulaires dans Angular. Indépendamment de la stratégie que vous choisissez, voici ce qu’une bibliothèque de formulaires devrait couvrir:

  • Prend en charge la liaison bidirectionnelle afin que les valeurs du contrôle d'entrée soient synchronisées avec l'état du composant.
  • Gardez une trace de l'état du formulaire et utilisez des repères visuels pour indiquer à l'utilisateur si l'état actuel est valide ou non. Par exemple, si le nom d'utilisateur comporte des caractères non valides, une bordure rouge doit apparaître autour du champ de saisie pour le nom d'utilisateur.
  • Avoir un mécanisme pour afficher correctement les erreurs de validation.
  • Activer ou désactiver certaines parties du formulaire, sauf si certains critères de validation sont remplis.

Introduction aux formulaires en angulaire

Angular, étant un framework frontal complet, possède son propre ensemble de bibliothèques pour la création de formulaires complexes. La dernière version d'Angular dispose de deux stratégies puissantes de création de formulaires. Elles sont:

  • formulaires pilotés par des modèles
  • formes modélisées ou réactives

Les deux technologies appartiennent à la bibliothèque @angular/forms et sont basées sur les mêmes classes de contrôle de formulaire. Cependant, ils diffèrent de manière remarquable par leur philosophie, leur style de programmation et leur technique. Choisir l'un sur l'autre dépend de vos goûts personnels et de la complexité de la forme que vous essayez de créer. À mon avis, vous devriez d'abord essayer les deux approches, puis choisir celle qui correspond à votre style et au projet en cours.

La première partie du didacticiel couvrira les formulaires pilotés par un modèle avec un exemple pratique: création d'un formulaire d'inscription avec validation pour tous les champs de formulaire. Dans la deuxième partie de ce tutoriel, nous allons retracer les étapes pour créer le même formulaire en utilisant une approche pilotée par un modèle.

Formulaires pilotés par modèle

L'approche axée sur les modèles est une stratégie empruntée à l'ère AngularJS. À mon avis, c'est la méthode la plus simple pour construire des formes. Comment ça marche? Nous utiliserons des directives angulaires.

Les directives vous permettent d'attacher un comportement aux éléments du DOM.
— Angular Documentation

Angular fournit des directives spécifiques aux formulaires que vous pouvez utiliser pour lier les données d'entrée du formulaire et le modèle. Les directives spécifiques au formulaire ajoutent des fonctionnalités et un comportement supplémentaires à un formulaire HTML simple. Le résultat final est que le modèle prend en charge les valeurs de liaison avec le modèle et la validation du formulaire.

Dans ce tutoriel, nous utiliserons des formulaires basés sur des modèles pour créer la page d'inscription d'une application. Le formulaire couvrira les éléments de formulaire les plus courants et différents contrôles de validation sur ces éléments de formulaire. Voici les étapes que vous suivrez dans ce tutoriel.

  • Ajoutez FormsModule à app.module.ts.
  • Créez une classe pour le modèle utilisateur.
  • Créez les composants initiaux et la disposition pour le formulaire d'inscription.
  • Utilisez les directives de forme angulaire comme ngModel, ngModelGroup et ngForm.
  • Ajouter la validation à l'aide de validateurs intégrés.
  • Afficher les erreurs de validation de manière significative.
  • Gérer la soumission du formulaire à l'aide de ngSubmit.

Commençons.

Conditions préalables

Le code de ce projet est disponible sur mon repo GitHub. Téléchargez le zip ou clonez le repo pour le voir en action. Si vous préférez commencer à partir de zéro, assurez-vous d'avoir installé Angular CLI. Utilisez la commande ng pour générer un nouveau projet.

Ensuite, générez un nouveau composant pour SignupForm.

Remplacez le contenu de app.component.html par celui-ci:

Voici la structure du répertoire src/. J'ai supprimé certains fichiers non essentiels pour garder les choses simples.

Comme vous pouvez le voir, un répertoire pour le composant SignupForm a été créé automatiquement. C'est là que va la plupart de notre code. J'ai également créé un nouveau User.ts pour stocker notre modèle d'utilisateur.

Le modèle HTML

Avant de nous plonger dans le modèle de composant actuel, nous devons avoir une idée abstraite de ce que nous construisons. Donc, voici la structure de forme que j'ai en tête. Le formulaire d'inscription aura plusieurs champs de saisie, un élément select et un élément checkbox.

The HTML Template

Voici le modèle HTML que nous utiliserons pour notre page d'inscription.

Modèle HTML

Les classes CSS utilisées dans le modèle HTML font partie de la bibliothèque Bootstrap utilisée pour rendre les choses belles. Comme il ne s’agit pas d’un tutoriel de conception, je ne parlerai pas beaucoup des aspects CSS du formulaire, sauf si cela est nécessaire.

Configuration de formulaire de base

Pour utiliser les directives de formulaire pilotées par un modèle, nous devons importer FormsModule à partir de @angular/forms et l'ajouter au tableau imports dans app.module.ts.

app/app.module.ts

Ensuite, créez une classe qui contiendra toutes les propriétés de l'entité Utilisateur. Nous pouvons soit utiliser une interface et l'implémenter dans le composant, soit utiliser une classe TypeScript pour le modèle.

app/User.ts

Maintenant, créez une instance de la classe dans le composant SignupForm. J'ai également déclaré une propriété supplémentaire pour le genre.

app/signup-form/signup-form.component.ts

Pour le fichier signup-form.component.html, je vais utiliser le même modèle HTML que celui décrit ci-dessus, mais avec des modifications mineures. Le formulaire d'inscription comporte un champ de sélection avec une liste d'options. Bien que cela fonctionne, nous le ferons de manière angulaire en parcourant la liste en utilisant la directive ngFor.

app / formup-form / signup-form.component.html

Ensuite, nous souhaitons lier les données de formulaire à l'objet de classe utilisateur afin que, lorsque vous entrez les données d'inscription dans le formulaire, un nouvel objet Utilisateur soit créé pour stocker ces données temporairement. De cette façon, vous pouvez garder la vue synchronisée avec le modèle, et cela s'appelle la liaison.

Il y a plusieurs façons de réaliser cela. Laissez-moi d'abord vous présenter ngModel et ngForm.

ngForm et ngModel

ngForm et ngModel sont des directives angulaires essentielles à la création de formulaires pilotés par des modèles. Commençons par ngForm en premier. Voici un extrait de ngForm des documents angulaires.

La directive NgForm complète l'élément form avec des fonctionnalités supplémentaires. Il contient les contrôles que vous avez créés pour les éléments avec une directive ngModel et un attribut name et surveille leurs propriétés, y compris leur validité. Il possède également sa propre propriété valid qui n'est vraie que si tous les contrôles contenus sont valides.

Tout d'abord, mettez à jour le formulaire avec la directive ngForm:

app/signup-form/signup-form.component.html

#signupForm est une variable de référence de modèle qui fait référence à la directive ngForm qui régit la totalité du formulaire. L'exemple ci-dessous illustre l'utilisation d'un objet de référence ngForm pour la validation.

app/signup-form/signup-form.component.html

Ici, signupForm.form.valid renverra false sauf si tous les éléments du formulaire réussissent leurs contrôles de validation respectifs. Le bouton d'envoi sera désactivé jusqu'à ce que le formulaire soit valide.

En ce qui concerne la liaison du modèle et du modèle, il existe de nombreuses façons de procéder, et ngModel dispose de trois syntaxes différentes pour résoudre ce problème. Elles sont:

  1. [(ngModel)]
  2. [ngModel]
  3. ngModel

Commençons par le premier.

Liaison bidirectionnelle à l'aide de [(ngModel)]

[(ngModel)] effectue une liaison bidirectionnelle pour la lecture et l'écriture des valeurs de contrôle d'entrée. Si une directive [(ngModel)] est utilisée, le champ d'entrée prend une valeur initiale dans la classe de composant liée et la remet à jour chaque fois qu'une modification de la valeur du contrôle d'entrée est détectée (au clavier et par pression du bouton). L'image ci-dessous décrit le processus de liaison bidirectionnel mieux.

Two-way binding with ngModel

Voici le code du champ de saisie du courrier électronique:

[(ngModel)] = "user.email" lie la propriété email de l'utilisateur à la valeur d'entrée. J'ai également ajouté un attribut name et set name = "email". Ceci est important et vous obtiendrez une erreur si vous n'avez pas déclaré d'attribut name lors de l'utilisation de ngModel.

De même, ajoutez un [(ngModel)] et un attribut name unique à chaque élément de formulaire. Votre formulaire devrait ressembler à ceci maintenant:

app/signup-form/signup-form.component.html

Le ngModelGroup est utilisé pour regrouper des champs de formulaire similaires afin de pouvoir exécuter des validations uniquement sur ces champs de formulaire. Les deux champs de mot de passe étant liés, nous les placerons sous un seul ngModelGroup. Si tout fonctionne comme prévu, la propriété user liée au composant doit être chargée de stocker toutes les valeurs de contrôle de formulaire. Pour voir cela en action, ajoutez ce qui suit après la balise de formulaire:

Passez la propriété utilisateur via JsonPipe pour afficher le modèle en tant que JSON dans le navigateur. Ceci est utile pour le débogage et la journalisation. Vous devriez voir une sortie JSON comme celle-ci.

An example of JSON output

Les valeurs circulent depuis la vue vers le modèle. Qu'en est-il de l'autre côté? Essayez d'initialiser l'objet utilisateur avec certaines valeurs.

app/signup-form/signup-form.component.ts

Et ils apparaissent automatiquement dans la vue:

La syntaxe de liaison bidirectionnelle [(ngModel)] vous aide à créer des formulaires sans effort. Cependant, il présente certains inconvénients; il existe donc une autre approche qui utilise ngModel ou [ngModel].

Ajout de ngModel au mixage

Lorsque ngModel est utilisé, nous sommes en fait responsables de la mise à jour de la propriété du composant avec les valeurs de contrôle d'entrée et inversement. Les données d'entrée ne sont pas automatiquement transmises à la propriété utilisateur du composant.

Remplacez donc toutes les instances de [(ngModel)] = "" par ngModel. Nous conserverons l'attribut name car les trois versions de ngModel ont besoin de l'attribut name pour fonctionner.

app/signup-form/signup-form.component.html

Avec ngModel, la valeur de l'attribut name deviendra une clé de l'objet de référence ngForm signupForm que nous avons créé précédemment. Ainsi, par exemple, signupForm.value.email stockera la valeur de contrôle pour l'identifiant de messagerie.

Remplacez {{user| json}} avec {{signupForm.value | json}} parce que c'est là que tout l'état est stocké en ce moment.

Liaison unidirectionnelle à l'aide de [ngModel]

Que faire si vous devez définir l'état initial à partir du composant de classe lié? C'est ce que le [ngModel] fait pour vous.

One-way binding with ngModel

Ici, les données circulent du modèle à la vue. Apportez les modifications suivantes à la syntaxe pour utiliser la liaison unidirectionnelle:

app/signup-form/signup-form.component.html

Alors, quelle approche choisir? Si vous utilisez [(ngModel)] et ngForm ensemble, vous aurez éventuellement deux états à gérer - user et signupForm.value - et cela pourrait être source de confusion.

Par conséquent, je vous recommanderai plutôt d'utiliser la méthode de liaison unidirectionnelle. Mais c'est quelque chose que vous pouvez décider.

Validation et affichage des messages d'erreur

Voici nos exigences pour la validation.

  • Tous les contrôles de formulaire sont requis.
  • Désactivez le bouton d'envoi jusqu'à ce que tous les champs de saisie soient remplis.
  • Le champ email doit contenir strictement un identifiant email.
  • Le champ mot de passe doit avoir une longueur minimale de 8.
  • Le mot de passe et la confirmation doivent correspondre.
Form with Validation using Template-driven forms
Notre formulaire avec validation en place

Le premier est facile. Vous devez ajouter un attribut de validation required à chaque élément de formulaire comme ceci:

app/signup-form/signup-form.component.html

Outre l'attribut required, j'ai également exporté une nouvelle variable de référence de modèle #email. Cela vous permet d'accéder au contrôle angulaire de la zone de saisie depuis le modèle lui-même. Nous l'utiliserons pour afficher des erreurs et des avertissements. Utilisez maintenant la propriété désactivée du bouton pour désactiver le bouton:

app/signup-form/signup-form.component.html

Pour ajouter une contrainte sur le courrier électronique, utilisez l'attribut pattern qui fonctionne avec les champs d'entrée. Les patterns permettent de spécifier des expressions régulières comme celle ci-dessous:

Pour le champ mot de passe, il suffit d'ajouter un attribut minlength="":

app/signup-form/signup-form.component.html

Pour afficher les erreurs, je vais utiliser la directive conditionnelle ngIf sur un élément div. Commençons par le champ de contrôle d'entrée pour l'email:

app/signup-form/signup-form.component.html

Il y a beaucoup de choses ici. Commençons par la première ligne de la section d'erreur.

Rappelez-vous la variable #email que nous avons exportée plus tôt? Il contient une quantité d'informations sur l'état du contrôle d'entrée du champ email. Cela inclut: email.valid, email.invalid, email.dirty, email.pristine, email.touched, email.untouched et email.errors. L'image ci-dessous décrit chacune de ces propriétés en détail.

Different class properties for displaying errors

Donc, l'élément div avec le *ngIf sera rendu uniquement si l'email est invalide. Cependant, l'utilisateur sera accueilli avec des erreurs concernant les champs de saisie vides avant même qu'ils aient la possibilité de modifier le formulaire.

Pour éviter ce scénario, nous avons ajouté la deuxième condition. L'erreur sera affichée uniquement après la visite du contrôle ou la modification de la valeur du contrôle.

Les éléments div imbriqués sont utilisés pour couvrir tous les cas d’erreurs de validation. Nous utilisons email.errors pour vérifier toutes les erreurs de validation possibles, puis les afficher sous la forme de messages personnalisés. Suivez maintenant la même procédure pour les autres éléments de formulaire. Voici comment j'ai codé la validation des mots de passe.

app/signup-form/signup-form.component.html

Cela commence à paraître un peu désordonné. Angular a un ensemble limité d'attributs de validateur: required, minlength, maxlength et pattern Pour couvrir tout autre scénario, comme celui de la comparaison de mots de passe, vous devrez vous baser sur les conditions ngIf imbriquées comme je l’ai fait ci-dessus. Ou idéalement, créez une fonction de validation personnalisée, que je couvrirai dans la troisième partie de cette série.

Dans le code ci-dessus, j'ai utilisé la syntaxe ngIf else introduite dans la dernière version d'Angular. Voici comment cela fonctionne:

Soumettre le formulaire en utilisant ngSubmit

Nous avons presque fini le formulaire. Maintenant, nous devons être en mesure de soumettre le formulaire, et le contrôle des données du formulaire doit être transféré à une méthode de composant, par exemple onFormSubmit ().

app/signup-form/signup-form.component.ts

Maintenant, pour le composant:

app/signup-form/signup-form.component.ts

Démo finale

Voici la version finale de l'application. J'ai ajouté quelques classes de bootstrap pour que le formulaire soit joli.

Résumé

Nous avons tous fini ici. Dans ce tutoriel, nous avons abordé tout ce que vous devez savoir sur la création d'un formulaire dans Angular à l'aide de l'approche basée sur des modèles. Les formulaires basés sur des modèles sont populaires pour leur simplicité et leur facilité d'utilisation.

Cependant, si vous avez besoin de créer un formulaire avec beaucoup d'éléments de formulaire, cette approche deviendra compliquée. Ainsi, dans le prochain tutoriel, nous aborderons la manière dont le modèle est conçu pour construire le même formulaire.

Partagez votre opinion dans les commentaires ci-dessous.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.