Welcome

Angular-Tuto.com

Angular-Tuto.com

Forms Angular 7

Formulaires dans Angular 7

Introduction

Une application, sans formulaire et user Inputs est simplement une application Vitrine. Angular2 est très flexible dans la gestion des inputs. Il nous donnes plusieurs degrés de manipulation tout en gardant la simplicité et l’efficacité.

Dans Angular à partir de la version 2, voir jusqu’à la version 7 et même après, on peut distinguer deux types de création des formulaires.

Template-Driven Forms : souvent est la méthode la plus utilisée pour la création et la gestion des formulaire.
Cette approche est appelée l’approche de AngularJS. Car c’est la même utilisée dans AngularJS. Cela ne signifie pas qu’elle est moins bonne.
Mais la plus simple à utiliser. Ceux qui ont travaillé avec AngularJs souviennent bien de la directive “ng-model”. Maintenant dans Angular 2 et les versions suivante on utilise la directive “ngModel”

Reactive Forms: C’est la moins utilisées mais la plus façonnable et flexible. Je l’appelle l’approche pour les pros.

A- Template-Driven Forms

Malgré que cette approche est simple à retenir. Mais parfois, on peut avoir des conflits entre la partie Front et la partie Background. Le schéma suivant explique un peu l’approche:
On a un formulaire HTML et dans le background, Angular utilise sa propre collection “Form” qui regroupe les valeurs des inputs dans le formulaire. Forms Angular 7

Cette approche se base essentiellement sur deux directives “ngModel” et “ngForm”.

-“ngForm”
Elle est utilisée dans votre balise HTML <form ngForm=“...”></form> pour exporter les valeurs saisies et les etats“ngForm” des validateurs vers la partie background. Donc, à partir du component, si on veut chercher qu’est ce qu’un user a saisi donc on récupère “ngForm” et on cherche dans cette collection les valeurs des inputs souhaitées.

-“ngModel”
On a déjà travaillé avec [(ngModel)]. Cette directive est utilisé à l'intérieur de la balise HTML <input ngModel=“”></input> .Elle est utilisées pour exposer la valeur de cet input ou même autre control. Donc son rôle est d’enregistrer ce champ en utilisant l’attribut “name”. “NgModel” permet aussi de définir comment ce champ est exposé (OneWay, TwoWay).

On commence par faire les importations dans le fichier appModule. L’importation de “FormsModule” se fait automatiquement si on utilise “AngularCLI”. Forms Angular 7

Exemple Contact

Dans cet exemple, on va essayer de créer un formulaire de contact qui permet de collecter quelques information (Nom, Email et adresse), avec un bouton submit et un autre bouton Reset.
Commençons par la définition du component, où, on va importer “NgForm” voir ligne 4. On ajoute, aussi deux fonctions OnFormSubmit(...) et resetUserForm(...) Forms Angular 7

- OnFormSubmit(...) prend un paramètre de type “NgForm” qu’on peut voir son contenu dans la console “log”.

- resetUserForm() permet tout simplement de faire un reset de tous les champs.

- Vous pouvez ajouter, des tests pour votre code TypeScript. Exemple:
userForm.valid: elle retourne un booléen. si le formulaire est valide ou non (on va voir après les règles de validation).
userForm.touched: si l’utilisateur click sur un champ (même pas saisir), dans ce cas la propriété touched passe à true. sinon par défaut, elle est à false.
userForm.submitted: elle vaut true si le user click sur le bouton submit. sinon avant ça elle est à false.
userForm.controls[]: est une collection qui contient tous les controls de votre formulaire. vous pouvez ainsi accéder à la valeur de chaque control par son nom.Exemple: userForm.controls['name'].value

Maintenant, dans la template du component.

- Etape 1: On commence par créer la balise <form> vor ligne 10. on passe la directive “ngForm” dans une variable qu’on l’a nommée #userForm. Cette variable #userForm sera utilisée comme paramètre de la fonction ‘onFormSubmit’ qu’on a déjà créé dans la définition du component.

- Etape 2: pour chaque input, on ajoute la directive “ngModel” et un attribut “name”. Attention avec “ngmodel”, on n’utilise pas ni le symbole [] ni le symbole (). Si vous n’ajouter pas ngModel à votre champ ou input , ce champs ne sera plus pris en compte.

- Le bouton submit n’a pas besoin d’une nouvelle fonction particulière car on a déjà défini la fonction “onFormSubmit(...)”.
Aussi, dans les navigateurs modernes les boutons sont de type submit. Sinon, vous pouvez ajouter type=“submit”.

Pour le bouton Reset, on ajoute une fonction pour l'événement (click)
Forms Angular 7

Résultat:
Après remplir le formulaire et cliquez sur le bouton “submit”, si vous inspecter les éléments. cherchez dans l’arborescence pour “value” Ainsi vous allez trouvez simplement les données que vous avez saisies manuellement.
Forms Angular 7

Exemple: Multi-Sélection

Dans cet exemple, on va utiliser ce qu’on a appris dans la partie précédent. On va essayer de réaliser l’exemple suivant: un formulaire de candidature:

- Deux SelectBox (Le premier est un simple select Box et le deuxième sera multi-options).
- un champ text
- Mécanisme de validation si les champs ne sont pas renseignés
- Un bouton “Valider” (Submit)
- Un bouton “Valeurs par défauts” pour initialiser le formulaire avec des valeurs par défauts.
- Un bouton “Reset” pour vider les champs

L’affichage sera comme suivant:
Forms Angular 7

Dans cet exemple, on va utiliser le même dossier que pour l’exemple précédent. On va ajouter un fichier “Helpers.ts”: c’est un fichier qui contient plusieurs classes utilisées dans notre exemple.
Forms Angular 7

Le schéma suivant explique l’organisation des classes et les méthodes exposées.
Forms Angular 7

Etape 1: Le fichiers Helpers.ts contient plusieurs classes:

- Classe Profil: qui contient deux propriété Id et Nom du profil ou de la fonction de la personne.
Forms Angular 7

- Classe Technology: qui représente une technologie maîtrisée par la personne. Elle contient, aussi, deux props Id et Nom.
Forms Angular 7

-Classe USer: C’est la classe de la personne qui va faire la candidature. Elle contient trois simples propriétés: USerName de type String, Profile de type Profile et Technologies de type tableau des technologies
Forms Angular 7

- Classe UserService: C’est la classe la plus importante de ce fichier.
C’est une classe décoré avec le décorateur @Injectable(on va parler de l'injection des dépendances dans un article futur) qui permet d’exposer notre service c.a.d il devient visible pour tous les component sans faire @Import. Dans ce cas il ne faut pas oublier d’importer (dans le fichier Helpers.ts)
Forms Angular 7

Un service angular, dans plusieurs cas, est utilisé pour récupérer ou charger des données. Dans notre cas aussi, on va alimenter l’application avec des données à travers plusieurs fonctions comme “getProfiles()” et “getTechnologies()”.
Aussi nous ajoutons une méthode “createUser()” qui permettra d’afficher dans la console les infos du user passé comme paramètre
Forms Angular 7


Etape2 (contactComponent.ts):
Maintenant, on va travailler sur le fichier contactComponent.ts . On commence par faire les importations nécessaires.
Forms Angular 7

Dans le constructeur on ajoute un paramètre de type UserService. Ce paramètre utilise l’injection de dépendance pour créer l’instance de cette classe.
Forms Angular 7

Puis on ajoute des variables d’initialisation (isValidFormSubmitted, allProfiles, allTechnologies, user).
Forms Angular 7

-Maintenant la fonction onFormSubmit2(form:NgForm). Comme on a vu, elle prend en paramètre de type “NgForm” pour récupérer ce que l’internaute a saisi (voir ligne 45,46,47). Puis on créé un nouveau user et on initialise ses propriétés avec les informations récupérées (Voir lignes 49->52). Finalement, on appelle la fonction “CreateUSer()” de notre webservice qui permet de faire la log. Et ResetForm().
Forms Angular 7


Etape 3 (contact.component.html):

- le fichier de la maquette est composé par un formulaire simple. On commence par une balise de type <p>. cette balise contient une directive “*ngIf=isValidFormSubmitted”. Donc cette balise <p> n’est visible que cette propriété est égale à true, ainsi on applique la classe css “success”.

Dans <form>, ngForm est stockée dans une variable #userForm. Cette dernière sera utilisée dans le submit.
Forms Angular 7

- Le premier select box:
est un select box simple. L’utilisateur peut choisir une seule option.
Forms Angular 7

Le code HTML montre que notre select est bindé à la propriété la user.profile (voir ligne 59)

La ligne 60 on a utilisé “required”: signifie que ce contrôle est obligatoire. Si l’utilisateur submit le formulaire et il n’a pas sélectionné une option donc notre propriété “isValidFormSubmitted” du component sera invalide et égale à false.

Ligne 61 : notre ngModel et stocké dans la variable #profile . Donc si on a besoin de voir une propriété qui concerne ce control, on utilise directement à cette nouvelle variable nommée #profile (Exemple: voir ligne 68, où on a utilisé #profile pour afficher un message d’erreur).

Ligne 62: c’est l’evenement “change” qui est bindé à la methode “onProfileChanged()”

Ligne 63: c’est la première option qui sera désactivé et sa valeur est null.

Ligne 64 à 66: c’est ici ou on utilise la directive *ngFor pour boucler sur la propriété “allProfiles” et on affiche le nom de chaque profile.

Ligne 68 à 73: cette Div sera visible et on lui applique la classe “error”, si l’utilisateur ne choisit pas une option && si le formulaire est submitted c.a.d le user a cliqué sur le bouton “Valider” && la propriété “isValidFormSubmitted” du component est invalide.
Forms Angular 7

Le deuxième select Box: est un select box à multi-options. L’utilisateur peut choisir une ou plusieurs options.
Forms Angular 7

Le code de ce deuxième control, est pratiquement le même que le premier. Sauf qu’on ajoute des propriété comme “multiple” qui indique que ce select box est à sélection multiple.
Forms Angular 7

-textbox Nom:
*[ngModel]= user.userName Ligne 82: est utilisée pour binder la valeur de l’input avec la propriété “user.userName”.
Forms Angular 7

- Les Boutons :
Trois boutons, au total. Le premier est le bouton submit. Qui exécute la méthode “onFormSubmit2(userForm)" mentionnée en haut. Les deux autres boutons on leurs méthodes bien déclarées dans les balises.
Forms Angular 7

B- Reactive-Form

C’est la deuxième forme de création des formulaire en Angular à partir de la version 2. Cette forme de création est plus approfondie et elle donne une marge de manipulation plus importante d'où un peu plus complexe à comprendre et à utiliser.

Dans le tout dernier exemple (celui des select Boxes ), on utilise la Template Driven Form modèle. Pour accéder à la valeur d’un control, on utilise form.controls['name'].value pour accéder à la valeur du control name.
Forms Angular 7

Le plus important, dans cette histoire est que la collection “form.controls[]” est créée systématiquement par Angular. Dans reactive-Form modèle, c’est à nous de créer et gérer cette collection.

Pour travailler avec Reactive-Forms, on a besoin de charger les bonnes classes et directives. Ainsi on doit commencer par charger le module “ReactiveFormsModule” dans notre application module. ainsi dans le fichier app.modules.ts, on ajoute une importation de notre module (voir ligne 19). Puis on l’importe dans notre application (Voir ligne 39).
Forms Angular 7

Remarque:
Template-Driven Forms: Pour créer des formulaires, on utilise les directives et classes suivantes: ‘ngForm’, ‘ngModel’ et le module ‘FormsModule’. Reactive-Forms: on utilises des classes et des directives comme: ‘FormControl’, ‘FormGroup’, ‘FormArray’, ‘FormBuilder’ et ils utilisent le module ‘ReactiveFormsModule’. On va commencer par un exemple formControl puis ‘formGroup’ ainsi que ‘formArray’

Exemple: formControl

On commence par créer un nouveau component “eleve” sous le dossier “Forms”. Donc sur l'invite de commande windows ou mac on tape la commande suivante.
Forms Angular 7

On va créer une application qui permet l’inscription d’un candidat mais en utilisant Reactive-Forms..
Forms Angular 7


Partie 1: Le component.ts:

On commence par faire les importations nécessaires (Voir ligne 3 et 4). à partir de la ligne 17, on créé nos propriétés de Type “FormControl”. “FormControl” est une classe qui permet d’ajouter un nouveau control à notre collection des contrôles. Cette collection dans l’autre modèle ‘Template-Driven-Forms’ est créée implicitement.

Notez bien que cette fonction peut être écrite de plusieurs façons. I.E, elle peut prendre différents paramètres comme value, validators, disabled ... Cet ensemble de parametre sera évalué en HTML sur la template. Ainsi, on a pour chaque contrôle HTML ( Dans la template) une propriété de type ‘FormControl’ (Dans la définition du component.ts).

La fonction “SetNameValue()” (ligne 23) initialise le champ nom par des valeurs par défaut.

Notez bien qu’on peut ajouter des règles de validation. Exemple: validators.required (ligne 17) qui s’assure que l’utilisateur a bien rempli ce champ. Sinon la propriété “name.inValid” sera égale à true, on va utiliser cette propriété dans la partie HM pour afficher un message d’erreur.

Un autre validateur utilisé est validators.maxLength() qui sera utile pour tester le nombre des caractères saisis dans le champ. La fonction “ResetValue()” (voir ligne 28) est pour vider les champs du formulaire. La fonction “ChangeValue” (voir ligne 31) est utilisée essentiellement pour changer l'état de la case à cocher.
Forms Angular 7

Partie 2: eleve.component.html:

Dans la partie template, chaque control HTML doit être associer à une propriété de type “FormControl” déjà créée dans la définition du component .

Exemple pour le premier champ “Nom” on va créer un input de type ‘text’. Pour faire la correspondance entre le contrôle HTML et la propriété “name” du component.ts on utilise la directive “[formControl]= ‘name’ ” (voir ligne 6).

Puis à la ligne 7, on test si ‘name.invalid== true’. Dans ce cas on affiche le message d’erreur.
Forms Angular 7

Les deux boutons “Set Value” et “Reset”, sont bindés à deux simples fonctions “setNameValue()” et “setResetName()”.
Forms Angular 7

finalement le reste des inputs sont liées en utilisant la directive [formControl]= “maProp”
Forms Angular 7

Pour résumer

- Pour créer une propriété de type FormControl (qui est la base du modèle) il suffit d'écrire maProp = new formControl();
- Pour initialiser une propriété de type FormControl . Il suffit de passer la valeur souhaité dans le constructeur. Vous pouvez passer un string, un booléen, un entier …. Exemple: maProp = new formControl(true); et ça permet de l’initialiser avec un booléen.
- Pour passer une valeur : this.maProp.setValue(‘maValeur’);
- Pour recupere la valeur d’une propriété de type FormControl. this.maProp.value;
- Pour désactiver un contrôle HTML à partir de sa propriété de type FormControl : maProp = new formControl({disabled: true});
- Pour ajouter des validateurs: maProp = new FormControl('', [Validators.required, Validators.maxLength(15)]);

Exemple: Reactive-Form en utilisant formGroup

Dans la partie précédente on a fait des exemples de la création des formulaires en utilisant “formControl”, maintenant, il ya une deuxième approche très similaire mais en utilisant “formGroup”. “formGroup” peut être considéré comme un conteneur de “formControl”. Donc d’une manière simplifiée, “formGroup” est un groupe de formControl.

Dans le component.ts, on utilise new “formGroup({ })” et dedans on ajoute des propriétés de type FormControl().
Forms Angular 7

Maintenant, la différence la plus importante c’est au niveau de la template HTML. En fait la balise <form> doit utiliser la directive [formGroup]=userform. Rappelez-vous bien que userForm est une propriété déjà créée, dans le code du component. Ainsi on fait la liaison entre le formulaire HTML et la propriété du code behind.

Aussi la directive “formControlName” est utilisée pour identifierd’une manière précise de quelle propriété on parle.
Forms Angular 7

-Pour récupérer une information, on peut utiliser la propriété get
Forms Angular 7

-Pour modifier une propriété, il suffit d’utiliser la propriété set ();
Forms Angular 7

Remarque:
Dans le modèle “Reactive-Forms”, autre que “formControl” et “groupControl”, on peut utiliser “arrayControl”. Ce dernier est utilisé dans le cas de la création dynamique des controls. “arrayControl” est dérivé de “groupControl”. Exemple imaginez que vous avez une application de réservation pour une soirée.

L’application, pour chaque personne récupère le nom, prénom, age. Dans ce cas, on a besoin de créer dynamiquement ces champs pour chaque personne.

C- Validation dans Template-Driven Form

Required

la directive Required est utilisée pour informer le component que ce champ est obligatoire.
Exemple: un input de type text que je lui donne l’identifiant “h_name” et qu’on l’ajoute la directive “required”.
Forms Angular 7

Et on peut tester si ce champ est rempli ou non en utilisant la propriété “invalid” ou bien “errors?.required”.
Exemple: ce bloc <div > sera visible (ainsi afficher le message d’erreur) si notre input est invalid.
Forms Angular 7

Exemple 2: De la même façon, on peut afficher le bloc Div en testant sur la propriété ‘errors’
Forms Angular 7

Même travail pour un input de type Button radio , CheckBox, il suffit d’ajouter la directive required et faire le même travail.

minLength & maxLength

Comme leurs noms l’indique, ces validateurs sont utilisés pour définir le nombre minimal et maximal pour un champ text.
Tout le travail se fait côté, template HTML. Il faut commencer par créer notre input avec la directive minlength.
Forms Angular 7

Puis pour afficher, la div qui contient le message d’erreur, il suffit de tester la propriété “errors?.minlength”
Forms Angular 7

Email validator

Pareil, comme pour les validateurs précédents, un validateur email est un jeu d’enfant. Il suffit d’ajouter la directive “email” puis tester.
Forms Angular 7

Notez bien que le validateur email peut valider si un text saisi respecte le format d’un email. c.a.d il cherche le symbole ‘@’ et le ‘.’ …

Validation dans Reactive Form

Required

Dans le même but ‘required’ dans Reactive-Form est utilisée pour rendre un champ obligatoire pour ceci on utilise “validators.required”.

Dns reactive-form, généralement, on ajoute nos validateurs coté component et non pas coté Template HTML, comme on le fait avec Template Driven.

Donc au moment de la définition de la propriété associée à l’input, on doit ajouter le validateur “required”.
Forms Angular 7

Puis, pour faire l’affichage dans la template, il suffit d’ajouter l’input comme suivant
Forms Angular 7

Maintenant pour afficher le message d’erreur, on a besoin d’ajouter une propriété à notre component, danc dans component.ts. Cette propriété contiendra l'état de notre champ:
Forms Angular 7 Tout Vent, 84700 Sorgues

minLength & maxLength

Comme leurs noms l’indique, ces validateurs sont utilisés pour définir le nombre minimal et maximal pour un champ text.
Comme pour “Required” dans la définition du component br />Forms Angular 7


Les sources

Vous pouvez télécharger le contenu du code source à partir du lien suivant
Télécharger le dossier SRC

Le fichier telechargé est le dossier SRC (compressé) de notreapplication. Il suffit de remplacer le dossier "src" de votre projet par celui téléchargé.

Personnellement je vous conseille de suivre le tutoriel de l'article et d'ecrire le code mot à mot pour plus d'apprentissage.

Conclusion

Meme pour les sites vitrine, créer un formulaire est, désormais, obligatoire. Dans ce cadre, Angular a bien fait les choses. Il nous propose deux approches:
- Template-Driven Form: La plus simple et la plus utilisée
&
-Reactive Form: est plus flexible et parametrable. Par contre cette approche est légèrement complexe.


Commentaires (5)

Amine | 30/5/2019

Merciiiii beaucoup pour cet article complet

Edejude | 2/8/2019

J'ai une bonne notion d'Angular maintenant. Merci beaucoup!

Covergraph | 2/9/2019

Bonjour, je suis codeur AS3, mais je cherche à remplacer mes connaissances étant donné que le flash player ne s'active plus automatiquement dans les divers navigateur, sauf peut-etre FireFox. J'espère trouver en TP + un Framework un équivalent, c'est pourquoi de suis ici, j'imagine que les composants sont des objets? des classes? Enfin, je vais en lire + et je verrai si je ne me suis pas trompé..

Alain | 2/9/2019

Il y a quelques fautes d'orthographe je crois.. dans la conclusion et dans le code, j'au vu arry, c'est pas array ?

Mike-Bauher | 19/9/2019

Grace à toi je viens de comprendre deux ou trois petites choses. merci et bonne continuation..

Votre commentaire

  • Le Nom est obligatoire (entre 3 et 25 Lettres)
  • L'Email est obligatoire (Format valide)
  • Le Commentaire est obligatoire (entre 3 et 1000 Lettres)