Événements de changement d’état de contrôle unifié

Découvrez comment utiliser le nouveau système de gestion d’événements unifié d’Angular v18 pour gérer les événements de formulaire avec un seul abonnement, améliorant ainsi la lisibilité et la maintenabilité du code.

Angulaire est un framework JavaScript largement utilisé, connu pour sa capacité à créer des applications Web dynamiques et interactives. L’une des forces d’Angular est sa puissante gestion des formulaires, et avec la sortie de Angulaire v18il existe désormais des événements d’état de contrôle unifié, qui simplifient le processus de création et de gestion des formulaires. Dans cet article, nous explorerons cette nouvelle events propriété et comment elle peut aider à rationaliser la création de formulaires dans les applications angulaires.

Formulaires en angulaire

Angular propose deux approches principales pour gérer les entrées des utilisateurs et créer des formulaires : formulaires basés sur des modèles et formes réactives. Les formulaires basés sur un modèle permettent d’utiliser des directives de formulaire directement dans le modèle Angular, tandis que les formulaires réactifs adoptent une approche basée sur un modèle pour créer des formulaires.

Formes réactives : une approche basée sur un modèle

Les formulaires réactifs offrent un moyen puissant et explicite de gérer les formulaires dans Angular et conviennent aux scénarios complexes où nous avons besoin d’un contrôle précis sur la validation des formulaires, les mises à jour dynamiques et le flux de données. Les formulaires réactifs nous fournissent :

• Un modèle de formulaire explicite – Dans les formulaires réactifs, nous définissons la structure du formulaire et les règles de validation par programme dans notre classe de composants. Ce modèle explicite rend la logique du formulaire transparente et plus facile à raisonner.
• Un flux de données immuable – Les formulaires réactifs utilisent une approche immuable de la gestion des données. Chaque modification de l’état du formulaire crée un nouvel objet d’état immuable, garantissant l’intégrité des données et simplifiant le suivi des modifications.
• Accès aux données synchrone – Les formulaires réactifs fournissent un accès synchrone au modèle de données du formulaire, ce qui facilite la récupération et la mise à jour des valeurs.

Illustrons ce comportement avec un exemple simple de formulaire réactif.

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

@Component({
  selector: 'app-profile-form',
  templateUrl: './profile-form.component.html',
})
export class ProfileFormComponent {
  profileForm = new FormGroup({
    firstName: new FormControl('', Validators.required),
    lastName: new FormControl(''),
    email: new FormControl('', [Validators.required, Validators.email]),
  });

  onSubmit() {
    console.log(this.profileForm.value);
  }
}

Dans l’exemple ci-dessus, nous définissons un modèle de formulaire en utilisant Groupe de formulaires et Contrôle de formulaire. Cela crée un formulaire qui contient trois champs : firstName, lastName et email. Le firstName et email les champs sont définis comme étant obligatoires à l’aide du Validateurs.obligatoires règle de validation. De plus, le email utilisations sur le terrain Validators.email pour vérifier que la saisie est une adresse e-mail valide.

Pour rendre le formulaire fonctionnel dans le modèle, nous devons enregistrer les contrôles à l’aide des directives de formulaire Angular telles que formGroup et formControlName. Voici un exemple de la façon dont nous pouvons lier les contrôles de formulaire au modèle.

<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
  <label for="firstName">First Name</label>
  <input id="firstName" formControlName="firstName">

  <label for="lastName">Last Name</label>
  <input id="lastName" formControlName="lastName">

  <label for="email">Email</label>
  <input id="email" formControlName="email">

  <button type="submit" [disabled]="profileForm.invalid">Submit</button>
</form>

À l’écoute des changements de valeur

Nous pouvons généralement souscrire à divers observables sur les contrôles de formulaire, tels que valueChanges, statusChanges et d’autres, pour réagir à des événements de contrôle spécifiques. Bâtissons sur l’existant ProfileFormComponent nous devons ci-dessus incorporer Angular valueChanges observable, nous permettant d’écouter les changements en temps réel dans les valeurs de contrôle de formulaire. Nous pouvons utiliser cette fonctionnalité pour ajouter un comportement personnalisé, tel que la validation dynamique de champs ou l’exécution d’effets secondaires basés sur les entrées de l’utilisateur.

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

@Component({
  selector: 'app-profile-form',
  templateUrl: './profile-form.component.html',
})
export class ProfileFormComponent implements OnInit {
  profileForm = new FormGroup({
    firstName: new FormControl('', Validators.required),
    lastName: new FormControl(''),
    email: new FormControl('', [Validators.required, Validators.email]),
  });

  ngOnInit() {
    
    this.profileForm.get('firstName')?.valueChanges.subscribe(value => {
      console.log('First Name changed to:', value);
      
    });

    
    this.profileForm.get('email')?.valueChanges.subscribe(value => {
      console.log('Email changed to:', value);
      
    });
  }

  onSubmit() {
    if (this.profileForm.valid) {
      console.log('Form Submitted:', this.profileForm.value);
    } else {
      console.log('Form is invalid');
    }
  }
}

Événements de changement d’état de contrôle unifié dans Angular v18

Dans les versions antérieures d’Angular, la gestion des événements de formulaire impliquait l’abonnement à plusieurs observables, tels que valueChanges et statusChanges comme nous l’avons vu ci-dessus. Cela conduisait souvent à des abonnements multiples, ce qui pouvait encombrer le code s’il n’était pas correctement géré. Angular v18 introduit un gestionnaire d’événements unifié pour résoudre ce problème : le events propriété sur les contrôles de formulaire comme FormControl, FormGroup et FormArray. Cette nouvelle fonctionnalité offre un moyen simplifié de gérer tous les événements de contrôle avec un seul abonnement.

Basons sur notre précédent ProfileFormComponent pour démontrer le fonctionnement du nouveau système d’événements. Dans cette version mise à jour, nous nous abonnerons au events propriété pour gérer différents types de changements d’état de contrôle en un seul endroit.

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

@Component({
  selector: 'app-profile-form',
  templateUrl: './profile-form.component.html',
})
export class ProfileFormComponent implements OnInit {
  profileForm = new FormGroup({
    firstName: new FormControl('', Validators.required),
    lastName: new FormControl(''),
    email: new FormControl('', [Validators.required, Validators.email]),
  });

  ngOnInit() {
    
    this.profileForm.events.subscribe(event => {
      
    });
  }

  onSubmit() {
    if (this.profileForm.valid) {
      console.log('Form Submitted:', this.profileForm.value);
    } else {
      console.log('Form is invalid');
    }
  }
}

Par exemple, nous pouvons filtrer des événements spécifiques tels que ValueChangeEvent pour gérer uniquement les changements de valeur dans le formulaire. Cela nous permet de personnaliser davantage le comportement en fonction du type d’événement spécifique.

ngOnInit() {
  this.profileForm.events
    .pipe(filter((event) => event instanceof ValueChangeEvent))
    .subscribe((event) => {
      console.log('Value:', event);
    });
}

Cette approche simplifie la gestion des événements de formulaire, de sorte que le code soit plus maintenable et plus efficace, en particulier lorsqu’il s’agit de formulaires complexes comportant de nombreux contrôles.

Conclure

Avec le nouveau système de gestion unifié des événements d’Angular v18, la gestion des événements de formulaire est devenue plus simple. Au lieu de souscrire à plusieurs observables pour chaque contrôle de formulaire, nous pouvons désormais gérer tous les événements à l’aide d’un seul abonnement, ce qui améliore la lisibilité et la maintenabilité du code. Cette fonctionnalité, combinée aux puissants formulaires réactifs d’Angular, facilite la création de formulaires dynamiques et interactifs dans nos applications. Si vous souhaitez passer à Angular v18, c’est une fonctionnalité intéressante à explorer (entre autres !), car il peut rationaliser la façon dont nous gérons les formulaires et gérons les interactions des utilisateurs.