DEV Community: Julien Bertacco

Guide sur l'utilisation de ReactiveFormsModule dans Angular

Julien Bertacco — Mon, 01 May 2023 08:15:31 +0000

ReactiveFormsModule est un module de formulaires réactifs d'Angular qui offre une approche plus flexible et robuste pour gérer les formulaires dans les applications Angular. Dans cet article, nous allons explorer en détail comment utiliser ReactiveFormsModule et fournir des exemples de code pour illustrer différentes fonctionnalités. Les formulaires réactifs utilisent un modèle basé sur les observables et sont idéaux pour travailler avec des formulaires complexes et dynamiques.

Table des matières

Prérequis
Configuration de ReactiveFormsModule
Création d'un formulaire réactif simple
Validation du formulaire
Validation asynchrone
Affichage des messages d'erreur
Groupes de formulaires imbriqués
Arrays de formulaires
Valeurs et statuts des observables
Soumission du formulaire
Utilisation de formBuilder
Bonnes pratiques
Conclusion

1. Prérequis

Assurez-vous d'avoir installé la version la plus récente d'Angular CLI et de Node.js. Vous devriez également être familiarisé avec les bases d'Angular, y compris les composants, les directives et les services.

2. Configuration de ReactiveFormsModule

Pour utiliser ReactiveFormsModule, commencez par importer ReactiveFormsModuledans le module de votre application :

import { ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ReactiveFormsModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

3. Création d'un formulaire réactif simple

Pour créer un formulaire réactif, importez FormControlet FormGroupdans votre composant et créez une instance de FormGroup:

import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-root',
  template: `
    <form [formGroup]="myForm">
      <label>
        Name:
        <input type="text" formControlName="name" />
      </label>
      <label>
        Email:
        <input type="email" formControlName="email" />
      </label>
    </form>
  `,
})
export class AppComponent {
  myForm = new FormGroup({
    name: new FormControl(''),
    email: new FormControl(''),
  });
}

4. Validation du formulaire

Pour ajouter des validations, importez les validateurs appropriés et passez-les en argument lors de l'instanciation des FormControl:

import { Validators } from '@angular/forms';

myForm = new FormGroup({
  name: new FormControl('', Validators.required),
  email: new FormControl('', [Validators.required, Validators.email]),
});

Angular offre plusieurs validateurs intégrés pour gérer des cas d'utilisation courants. Voici une liste des validateurs les plus couramment utilisés, leur fonctionnement et des exemples d'utilisation :

Validators.required : vérifie que le champ n'est pas vide et qu'une valeur a été saisie. Si le champ est vide, une erreur required est renvoyée.

Exemple d'utilisation :

name: new FormControl('', Validators.required)

Validators.minLength : vérifie que la longueur de la valeur saisie est supérieure ou égale à une longueur minimale spécifiée. Si la longueur est inférieure, une erreur minlength est renvoyée.

Exemple d'utilisation :

password: new FormControl('', Validators.minLength(8))

Validators.maxLength : vérifie que la longueur de la valeur saisie est inférieure ou égale à une longueur maximale spécifiée. Si la longueur est supérieure, une erreur maxlength est renvoyée.

Exemple d'utilisation :

password: new FormControl('', Validators.maxLength(32))

Validators.email : vérifie que la valeur saisie est un e-mail valide, en fonction d'une expression régulière simplifiée. Si l'e-mail est invalide, une erreur email est renvoyée.

Exemple d'utilisation :

email: new FormControl('', Validators.email)

Validators.pattern : vérifie que la valeur saisie correspond à une expression régulière spécifiée. Si la valeur ne correspond pas, une erreur pattern est renvoyée.

Exemple d'utilisation :

username: new FormControl('', Validators.pattern('^[a-z0-9_-]{8,32}$'))

Validators.min : vérifie que la valeur numérique saisie est supérieure ou égale à un nombre minimum spécifié. Si la valeur est inférieure, une erreur min est renvoyée.

Exemple d'utilisation :

age: new FormControl('', Validators.min(18))

Validators.max : vérifie que la valeur numérique saisie est inférieure ou égale à un nombre maximum spécifié. Si la valeur est supérieure, une erreur max est renvoyée.

Exemple d'utilisation :

age: new FormControl('', Validators.max(120))

Les validateurs intégrés peuvent être utilisés seuls ou combinés en utilisant un tableau pour appliquer plusieurs validateurs sur un seul contrôle de formulaire :

password: new FormControl('', [
  Validators.required,
  Validators.minLength(8),
  Validators.maxLength(32),
]),

En maîtrisant ces validateurs intégrés et en comprenant comment les appliquer sur vos contrôles de formulaire, vous pouvez garantir la qualité des données saisies par les utilisateurs et améliorer l'expérience utilisateur de vos applications Angular.

5. Validation asynchrone

Les validateurs asynchrones sont utiles lorsque vous devez effectuer des opérations de validation qui nécessitent une communication avec un serveur, comme vérifier si un nom d'utilisateur est disponible. Les validateurs asynchrones sont similaires aux validateurs personnalisés, mais retournent un Promise ou un Observable.

Par exemple, pour créer un validateur asynchrone qui vérifie si un nom d'utilisateur est disponible :

import { AbstractControl, ValidationErrors } from '@angular/forms';

function usernameAvailable(control: AbstractControl): Promise<ValidationErrors | null> {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (control.value === 'takenUsername') {
        resolve({ usernameAvailable: false });
      } else {
        resolve(null);
      }
    }, 2000);
  });
}

myForm = new FormGroup({
  username: new FormControl('', Validators.required, usernameAvailable),
});

6. Affichage des messages d'erreur

Pour afficher des messages d'erreur, utilisez des éléments conditionnels dans votre modèle :

<form [formGroup]="myForm">
  <!-- ... -->
  <label>
    Email:
    <input type="email" formControlName="email" />
  </label>
  <div *ngIf="myForm.get('email').errors?.required">Email is required</div>
  <div *ngIf="myForm.get('email').errors?.email">Invalid email</div>
</form>

7. Groupes de formulaires imbriqués

Pour les groupes de formulaires imbriqués, créez des instances de FormGroup supplémentaires et ajoutez-les à votre formulaire principal :

myForm = new FormGroup({
  name: new FormControl('', Validators.required),
  email: new FormControl('', [Validators.required, Validators.email]),
  address: new FormGroup({
    street: new FormControl(''),
    city: new FormControl(''),
    zip: new FormControl(''),
  }),
});

Mettez à jour votre modèle pour refléter les groupes de formulaires imbriqués :

<form [formGroup]="myForm">
  <!-- ... -->
  <div formGroupName="address">
    <label>
      Street:
      <input type="text" formControlName="street" />
    </label>
    <label>
      City:
      <input type="text" formControlName="city" />
    </label>
    <label>
      Zip:
      <input type="text" formControlName="zip" />
    </label>
  </div>
</form>

8. Arrays de formulaires

Pour gérer des tableaux de formulaires, importez FormArrayet ajoutez-le à votre formulaire :

import { FormArray } from '@angular/forms';

myForm = new FormGroup({
  // ...
  aliases: new FormArray([new FormControl('')]),
});

// Méthode pour ajouter un nouvel alias
addAlias(): void {
  (this.myForm.get('aliases') as FormArray).push(new FormControl(''));
}

Mettez à jour votre modèle pour refléter les arrays de formulaires :

<form [formGroup]="myForm">
  <!-- ... -->
  <div formArrayName="aliases">
    <div *ngFor="let alias of myForm.get('aliases').controls; let i = index">
      <label>
        Alias {{ i + 1 }}:
        <input type="text" [formControlName]="i" />
      </label>
    </div>
  </div>
  <button (click)="addAlias()">Add Alias</button>
</form>

9. Valeurs et statuts des observables

Pour suivre les changements de valeurs et de statuts, utilisez les observables valueChangeset statusChanges:

ngOnInit(): void {
  this.myForm.valueChanges.subscribe(val => {
    console.log('Form value changed:', val);
  });

  this.myForm.statusChanges.subscribe(status => {
    console.log('Form status changed:', status);
  });
}

10. Soumission du formulaire

Pour soumettre le formulaire, créez une méthode dans votre composant et liez-la à l'événement ngSubmit:

onSubmit(): void {
  console.log('Form submitted:', this.myForm.value);
}

Mettez à jour votre modèle pour ajouter un bouton de soumission et lier l'événement ngSubmit:

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <!-- ... -->
  <button type="submit" [disabled]="myForm.invalid">Submit</button>
</form>

Vous devriez maintenant être en mesure de créer des formulaires réactifs complexes et de les gérer efficacement dans vos applications Angular. N'hésitez pas à explorer davantage les fonctionnalités offertes par ReactiveFormsModule pour tirer le meilleur parti des formulaires réactifs.

11. Utilisation de FormBuilder

FormBuilder est un service inclus dans ReactiveFormsModule qui simplifie la création de formulaires réactifs en utilisant une syntaxe plus concise. Il est particulièrement utile lorsque vous travaillez avec des formulaires complexes, des groupes imbriqués ou des tableaux de formulaires.

Voici les étapes pour utiliser FormBuilder :

Importez FormBuilder dans votre composant :

import { FormBuilder } from '@angular/forms';

Injectez FormBuilder dans le constructeur du composant :

constructor(private fb: FormBuilder) {}

Utilisez FormBuilder pour créer des instances de FormGroup, FormControl, et FormArray :

Voici comment utiliser FormBuilder pour créer un formulaire réactif similaire à celui décrit précédemment :

myForm = this.fb.group({
  name: ['', Validators.required],
  email: ['', [Validators.required, Validators.email]],
  address: this.fb.group({
    street: [''],
    city: [''],
    zip: [''],
  }),
  aliases: this.fb.array([this.fb.control('')]),
});

Comme vous pouvez le constater, FormBuilder simplifie la création des instances de FormGroup, FormControl et FormArray avec des méthodes telles que group(), array() et control().

Ajoutez des éléments aux FormArray en utilisant FormBuilder :

Si vous souhaitez ajouter des éléments à un FormArray, vous pouvez utiliser this.fb.control() pour créer un nouveau contrôle :

addAlias(): void {
  (this.myForm.get('aliases') as FormArray).push(this.fb.control(''));
}

Utilisez FormBuilder pour créer des validateurs personnalisés :

Si vous devez créer des validateurs personnalisés pour vos contrôles de formulaire, vous pouvez également utiliser FormBuilder pour cela. Par exemple, si vous voulez créer un validateur qui vérifie si la valeur d'un champ est égale à une chaîne spécifique, vous pouvez procéder comme suit :

import { AbstractControl, ValidationErrors } from '@angular/forms';

function matchValue(value: string) {
  return (control: AbstractControl): ValidationErrors | null => {
    return control.value === value ? null : { matchValue: true };
  };
}

myForm = this.fb.group({
  secret: ['', [Validators.required, matchValue('secret-value')]],
});

En résumé, FormBuilder est un outil puissant qui simplifie la création et la gestion des formulaires réactifs dans Angular. En utilisant FormBuilder, vous pouvez rendre votre code plus lisible et maintenable tout en profitant des fonctionnalités avancées des formulaires réactifs.

12. Bonnes pratiques

Pour tirer le meilleur parti des ReactiveForms dans Angular, il est important de suivre certaines bonnes pratiques pour assurer la lisibilité, la maintenabilité et la performance de vos applications. Voici quelques conseils pour travailler efficacement avec les ReactiveForms :

Utiliser FormBuilder

L'utilisation de FormBuilder permet de simplifier la création de FormGroup, FormControl et FormArray avec une syntaxe plus concise et lisible. Cela peut améliorer la maintenabilité de votre code en réduisant la complexité et en rendant les intentions plus claires.

Gérer les erreurs de validation

Prenez le temps de gérer correctement les erreurs de validation, en affichant des messages d'erreur clairs et spécifiques pour chaque erreur. Utilisez les directives et les expressions conditionnelles d'Angular pour afficher les messages d'erreur uniquement lorsque le contrôle de formulaire est invalide et a été touché.

Utiliser des validateurs personnalisés et asynchrones

Si les validateurs intégrés ne répondent pas à vos besoins, n'hésitez pas à créer des validateurs personnalisés ou asynchrones pour des cas d'utilisation spécifiques. Assurez-vous de bien comprendre le cycle de vie des formulaires et les différences entre les validateurs synchrones et asynchrones pour une implémentation correcte.

Structurer les groupes de formulaires et les arrays de formulaires

Dans les formulaires complexes, utilisez des groupes de formulaires imbriqués et des arrays de formulaires pour organiser et structurer vos données. Cela améliorera la lisibilité de votre code et facilitera la maintenance et la mise à jour de vos formulaires.

Utiliser l'opérateur de décomposition (spread operator)

L'opérateur de décomposition peut simplifier le traitement des données de formulaire, en facilitant la fusion d'objets, l'ajout d'éléments à un tableau, ou la combinaison de groupes de formulaires imbriqués. Utilisez l'opérateur de décomposition pour rendre votre code plus lisible et maintenable.

Désactiver le bouton de soumission lorsque le formulaire est invalide

Pour éviter que les utilisateurs ne soumettent accidentellement des formulaires avec des données invalides, désactivez le bouton de soumission lorsque le formulaire est invalide. Utilisez l'attribut [disabled] pour désactiver le bouton en fonction du statut de validation du formulaire.

Détacher les observables inutilisés

Si vous utilisez des observables tels que valueChangeset statusChangespour suivre les modifications des valeurs et des statuts des formulaires, assurez-vous de vous désabonner de ces observables lorsque le composant est détruit pour éviter les fuites de mémoire. Utilisez le pattern takeUntil ou la méthode unsubscribe() pour gérer correctement la désinscription.

En suivant ces bonnes pratiques pour les ReactiveForms, vous pourrez créer des applications Angular robustes et maintenables, avec des formulaires réactifs bien structurés et efficaces.

13. Conclusion

Dans cet article, nous avons exploré l'utilisation de ReactiveFormsModule et de FormBuilder pour créer et gérer des formulaires réactifs dans Angular. Les formulaires réactifs sont une approche flexible et robuste pour gérer des formulaires complexes et dynamiques dans vos applications Angular. Grâce à ReactiveFormsModule et FormBuilder, vous pouvez créer des instances de FormGroup, FormControl et FormArray, ajouter des validations, afficher des messages d'erreur, gérer des groupes de formulaires imbriqués et des arrays de formulaires, et suivre les changements de valeurs et de statuts à l'aide d'observables.

En maîtrisant les concepts et les techniques présentés dans cet article, vous serez mieux équipé pour créer des formulaires réactifs efficaces et maintenables pour vos applications Angular. N'hésitez pas à explorer davantage les fonctionnalités offertes par ReactiveFormsModule et FormBuilder pour tirer le meilleur parti des formulaires réactifs et améliorer encore plus l'expérience utilisateur de vos applications.

Optimiser une application Angular avec ChangeDetectionStrategy

Julien Bertacco — Sun, 30 Apr 2023 07:01:48 +0000

Aujourd'hui, nous allons explorer une technique clé pour optimiser une application Angular : la Change Detection Strategy. Nous allons voir les concepts de base et des exemples de code pour illustrer comment mettre en œuvre la Change Detection Strategy à OnPush afin d'améliorer les performances de votre application.

Qu'est-ce que la Change Detection Strategy?

La Change Detection Strategy est un mécanisme d'Angular permettant de contrôler la manière dont les changements sont détectés et répercutés dans l'application. Angular offre deux stratégies de détection de changements : Default et OnPush.

Default : Cette stratégie vérifie tous les composants de l'application à chaque cycle de détection de changements, même si aucune modification n'a été effectuée. Cela peut entraîner une utilisation importante des ressources et affecter les performances.
OnPush : Cette stratégie ne vérifie les composants que lorsqu'une modification est détectée dans les propriétés liées par les données (@Input). En conséquence, les cycles de détection de changements sont réduits, optimisant ainsi les performances de l'application.

Exemple de code :

Considérons un exemple simple pour illustrer la différence entre les deux stratégies de détection de changements.

Sans Change Detection Strategy à OnPush

Dans cet exemple, nous avons un composant parent qui affiche la liste des articles. Chaque article est un composant enfant.

// app.component.ts (Composant parent)
@Component({
selector: 'app-root',
template: `<app-article *ngFor="let article of articles" [data]="article"></app-article>` ,
})
export class AppComponent {
articles = [
{ title: 'Article 1', content: 'Contenu de l\'article 1' },
{ title: 'Article 2', content: 'Contenu de l\'article 2' },
];
}

// article.component.ts (Composant enfant)
@Component({
selector: 'app-article',
template: `<h2>{{ data.title }}</h2> <p>{{ data.content }}</p>` ,
})
export class ArticleComponent {
@Input() data: any;
}

Dans cet exemple, la stratégie de détection de changements par défaut est utilisée. Par conséquent, Angular vérifie tous les composants à chaque cycle de détection de changements, même si aucune modification n'a été effectuée.

Avec Change Detection Strategy à OnPush

Pour optimiser les performances, nous pouvons utiliser la stratégie de détection de changements OnPush pour le composant enfant.

// article.component.ts (Composant enfant)
@Component({
selector: 'app-article',
template: `<h2>{{ data.title }}</h2> <p>{{ data.content }}</p>` ,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ArticleComponent {
@Input() data: any;
}

Dans cet exemple, Angular ne vérifie le composant enfant que lorsque la propriété liée par les données '@Input' change. Cela réduit les cycles de détection de changements et améliore les performances.

Métriques de performance :

Pour comparer les performances avec et sans la Change Detection Strategy à OnPush, nous pouvons utiliser des outils de profilage tels que la console de développement Google Chrome (onglet Performance) ou l'extension Augury pour Angular.

Prenons les métriques de performance suivantes pour illustrer la différence :

Sans Change Detection Strategy à OnPush :

Temps de rendu moyen : 80 ms
Nombre de cycles de détection de changements : 150

Avec Change Detection Strategy à OnPush :

Temps de rendu moyen : 50 ms
Nombre de cycles de détection de changements : 80

Comme vous pouvez le constater, en utilisant la stratégie de détection de changements OnPush, le temps de rendu moyen est réduit de 30 ms et le nombre de cycles de détection de changements est presque divisé par deux. Cela montre clairement que la stratégie OnPush peut améliorer considérablement les performances de l'application.

Conclusion:

La Change Detection Strategy à OnPush est une technique puissante pour optimiser une application Angular. En limitant les cycles de détection de changements aux composants nécessitant une mise à jour, les performances sont améliorées, ce qui permet d'obtenir une expérience utilisateur plus fluide et réactive.

Il est important de noter que la stratégie OnPush n'est pas une solution universelle et qu'elle doit être utilisée judicieusement en fonction des besoins de l'application. Toutefois, en maîtrisant cette technique et en l'appliquant de manière appropriée, vous pouvez tirer le meilleur parti d'Angular et créer des applications Web performantes.

J'espère que cet article vous a aidé à comprendre comment utiliser la Change Detection Strategy à OnPush pour optimiser votre application Angular. N'hésitez pas à partager vos expériences et vos questions dans les commentaires ci-dessous !