Contrôle et validation des Formulaires Angular
1. Formulaires Réactifs
Les formulaires réactifs dans Angular permettent de définir le modèle de formulaire
directement dans le composant TypeScript. Cette approche offre un contrôle complet sur la
validation, les valeurs, et les états des champs de formulaire. Les formulaires réactifs sont
construits autour des classes de base de FormControl, FormGroup, et FormArray.
Étapes :
1. Importation des modules :
2. import { Component } from '@angular/core';
3. import { FormControl, FormGroup, Validators } from '@angular/forms';
4. Définition du modèle de formulaire :
5. @Component({
6. selector: 'app-reactive-form',
7. template: `
8. <form [formGroup]="form">
9. <label>
10. Nom :
11. <input type="text" formControlName="name" />
12. <span *ngIf="[Link]['name'].invalid &&
[Link]['name'].touched">
13. Le nom est requis.
14. </span>
15. </label>
16. <button type="submit"
[disabled]="[Link]">Soumettre</button>
17. </form>
18. `
19. })
20. export class ReactiveFormComponent {
21. // Définition du modèle de formulaire avec FormGroup
22. form = new FormGroup({
23. name: new FormControl('', [[Link]]) // Contrôle
avec validation de la longueur
24. });
25.
26. // Méthode pour gérer la soumission du formulaire
27. onSubmit() {
28. if ([Link]) {
29. [Link]('Form submitted:', [Link]);
30. } else {
31. [Link]('Form is invalid');
32. }
33. }
34. }
Commentaire :
• FormGroup : C’est la classe principale pour gérer un groupe de contrôles. Elle peut
contenir d’autres FormControl ou FormGroup.
• FormControl : Utilisé pour les champs individuels dans le formulaire. Elle gère la
valeur, la validation et les événements.
• [Link] : Un exemple de validation pour s’assurer que le champ est
rempli.
Flux de données dans les formulaires réactifs
• Source de vérité : Le modèle TypeScript (FormControl, FormGroup).
• Liens :
o La directive [formGroup] est utilisée pour lier le FormGroup au formulaire
HTML.
o Les directives formControlName ou formControl lient les champs individuels
de la FormGroup aux éléments du formulaire.
• Changement de valeur : Les changements de valeurs dans les champs du formulaire
(via l’interface utilisateur) sont répercutés instantanément dans le modèle Angular, et
inversement. Par exemple :
• [Link]['name'].setValue('Jean'); // Met à jour le champ
de saisie
• [Link]([Link]['name'].value); // Lecture de la
valeur courante
Validation des formulaires réactifs
• La validation peut inclure [Link], [Link](3),
[Link](10), etc.
• Exemple :
• [Link]['name'].setValidators([[Link],
[Link](3)]);
• [Link]['name'].updateValueAndValidity();
Tests des formulaires réactifs
• Les tests peuvent vérifier l’état des contrôles de formulaire, les changements de
valeur, et les validations.
• Exemple de test unitaires :
• it('should validate name control', () => {
• const nameControl = [Link]['name'];
• [Link]('');
• expect([Link]).toBeFalse(); // Vérifie que le champ est
invalide sans nom
• [Link]('Jean');
• expect([Link]).toBeTrue(); // Vérifie que le champ est
valide avec un nom
• });
2. Formulaires Basés sur le Modèle
Les formulaires basés sur le modèle utilisent implicitement un modèle de formulaire géré par
Angular via la directive ngModel. Cette approche simplifie la configuration des formulaires,
idéale pour les formulaires plus simples ou les projets de petite taille.
Étapes :
1. Importation des modules :
2. import { Component } from '@angular/core';
3. Définition du modèle de formulaire :
4. @Component({
5. selector: 'app-template-form',
6. template: `
7. <form #form="ngForm">
8. <label>
9. Nom :
10. <input type="text" [(ngModel)]="name" name="name" required
/>
11. <span *ngIf="[Link]['name']?.invalid &&
[Link]['name']?.touched">
12. Le nom est requis.
13. </span>
14. </label>
15. <button type="submit"
[disabled]="[Link]">Soumettre</button>
16. </form>
17. `
18. })
19. export class TemplateFormComponent {
20. name = ''; // Propriété liée au champ de formulaire
21. }
Commentaire :
• ngModel : L’attribut [ngModel] est utilisé pour lier la propriété du composant à
l’entrée du formulaire.
• Validation : Les validations se font via les attributs HTML (required,
minlength="3"). Angular gère automatiquement la création du FormControl.
• Flux de données : Les changements dans le champ de formulaire (via l’utilisateur)
sont directement répercutés dans la propriété du composant. Par exemple :
• <input type="text" [(ngModel)]="name" name="name" required
minlength="3" />
Flux de données dans les formulaires basés sur le modèle
• Source de vérité : Le template HTML.
• Modifications de données : Les changements de données dans le champ de saisie
sont automatiquement reflétés dans la propriété du composant grâce à la liaison
bidirectionnelle.
• Exemple de liaison :
• [Link] = 'Jean'; // Mise à jour de la propriété en TypeScript
Validation des formulaires basés sur le modèle
• Les règles de validation se trouvent dans le template :
• <input type="text" [(ngModel)]="name" name="name" required
minlength="3" />
Si le champ est vide ou trop court, Angular applique automatiquement les validations.
Tests des formulaires basés sur le modèle
• Les tests vérifient le comportement de la liaison entre la vue et le modèle.
• Exemple de test :
• it('should bind input value to component property', () => {
• const input = [Link]('input');
• [Link] = 'Jean';
• [Link](new Event('input'));
• [Link](); // Mise à jour de la vue
• expect([Link]).toBe('Jean'); // Vérification de la liaison
• });
Flux de données dans les formulaires
• Formulaires réactifs : Les données de l’utilisateur sont répercutées immédiatement
dans le modèle via les contrôles FormControl. Les changements dans le modèle
mettent à jour la vue en temps réel.
• Formulaires basés sur le modèle : Les données de l’utilisateur sont capturées et
répercutées dans le modèle via Angular, gérant automatiquement les mises à jour entre
la vue et le modèle.
Tests
• Formulaires réactifs : Les tests vérifient directement les propriétés des contrôles et
les changements de valeur.
• Formulaires basés sur le modèle : Les tests se concentrent sur la vérification de la
liaison entre les champs du formulaire et les propriétés du composant.
Étapes suivantes
• Intégration des validations complexes avec les formulaires réactifs.
• Exploration des meilleures pratiques pour tester les formulaires Angular.