Explorer les formes angulaires?: une nouvelle alternative avec des signaux

Dans le monde d'Angular, les formulaires sont essentiels pour l'interaction des utilisateurs, que vous créiez une simple page de connexion ou une interface de profil utilisateur plus complexe. Angular propose traditionnellement deux approches principales?: les formulaires basés sur des modèles et les formulaires réactifs. Dans ma précédente série sur les formulaires réactifs angulaires, j'ai exploré comment exploiter la puissance des formulaires réactifs pour gérer une logique complexe, créer des formulaires dynamiques et créer des contr?les de formulaire personnalisés.

Un nouvel outil de gestion de la réactivité - signaux - a été introduit dans la version 16 d'Angular et est depuis lors au centre des préoccupations des mainteneurs d'Angular, devenant stable avec la version 17. Les signaux vous permettent de gérer les changements d'état de manière déclarative, offrant une alternative intéressante qui combine la simplicité des formulaires basés sur des modèles avec la réactivité robuste des formulaires réactifs. Cet article examinera comment les signaux peuvent ajouter de la réactivité aux formulaires simples et complexes dans Angular.

Récapitulatif?: approches de formes angulaires

Avant d'aborder le sujet de l'amélioration des formulaires basés sur des modèles avec des signaux, récapitulons rapidement les approches de formulaires traditionnelles d'Angular?:

1. Formulaires basés sur un modèle?: définis directement dans le modèle HTML à l'aide de directives comme ngModel, ces formulaires sont faciles à mettre en place et sont idéaux pour les formulaires simples. Cependant, ils peuvent ne pas fournir le contr?le précis requis pour des scénarios plus complexes.

   Voici un exemple minimal de formulaire basé sur un modèle?:
   

   <form (ngSubmit)="onSubmit()">
     <label for="name">Name:</label>
     <input>
   
   </li>
   </ol>
   
   
   
   <pre class="brush:php;toolbar:false">```typescript
   import { Component } from '@angular/core';
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html'
   })
   export class AppComponent {
     name = '';
   
     onSubmit() {
       console.log(this.name);
     }
   }
   ```
   

   1. Formulaires réactifs?: gérés par programme dans la classe de composants à l'aide des classes FormGroup, FormControl et FormArray d'Angular?; les formulaires réactifs offrent un contr?le granulaire sur l’état et la validation du formulaire. Cette approche est bien adaptée aux formulaires complexes, comme l'expliquaient mes articles précédents sur les formulaires réactifs angulaires.

      Et voici un exemple minimal de forme réactive?:
      

      import { Component } from '@angular/core';
      import { FormGroup, FormControl } from '@angular/forms';
      
      @Component({
        selector: 'app-root',
        templateUrl: './app.component.html'
      })
      export class AppComponent {
        form = new FormGroup({
          name: new FormControl('')
        });
      
        onSubmit() {
          console.log(this.form.value);
        }
      }
      

   ```html
   <form [formGroup]="form" (ngSubmit)="onSubmit()">
     <label for="name">Name:</label>
     <input>
   
   
   
   <h2>
     
     
     Introducing Signals as a New Way to Handle Form Reactivity
   </h2>
   
   <p>With the release of Angular 16, signals have emerged as a new way to manage reactivity. Signals provide a declarative approach to state management, making your code more predictable and easier to understand. When applied to forms, signals can enhance the simplicity of template-driven forms while offering the reactivity and control typically associated with reactive forms.</p>
   
   <p>Let’s explore how signals can be used in both simple and complex form scenarios.</p>
   
   <h3>
     
     
     Example 1: A Simple Template-Driven Form with Signals
   </h3>
   
   <p>Consider a basic login form. Typically, this would be implemented using template-driven forms like this:<br>
   </p>
   
   <pre class="brush:php;toolbar:false"><!-- login.component.html -->
   <form name="form" (ngSubmit)="onSubmit()">
     <label for="email">E-mail</label>
     <input type="email">
   
   
   
   
   
   <pre class="brush:php;toolbar:false">// login.component.ts
   import { Component } from "@angular/core";
   
   @Component({
     selector: "app-login",
     templateUrl: "./login.component.html",
   })
   export class LoginComponent {
     public email: string = "";
     public password: string = "";
   
     onSubmit() {
       console.log("Form submitted", { email: this.email, password: this.password });
     }
   }
   

   Cette approche fonctionne bien pour les formulaires simples, mais en introduisant des signaux, nous pouvons conserver la simplicité tout en ajoutant des capacités réactives?:
   

   // login.component.ts
   import { Component, computed, signal } from "@angular/core";
   import { FormsModule } from "@angular/forms";
   
   @Component({
     selector: "app-login",
     standalone: true,
     templateUrl: "./login.component.html",
     imports: [FormsModule],
   })
   export class LoginComponent {
     // Define signals for form fields
     public email = signal("");
     public password = signal(""); // Define a computed signal for the form value
   
     public formValue = computed(() => {
       return {
         email: this.email(),
         password: this.password(),
       };
     });
   
     public isFormValid = computed(() => {
       return this.email().length > 0 && this.password().length > 0;
     });
   
     onSubmit() {
       console.log("Form submitted", this.formValue());
     }
   }
   

   <!-- login.component.html -->
   <form name="form" (ngSubmit)="onSubmit()">
     <label for="email">E-mail</label>
     <input type="email">
   
   
   
   <p>In this example, the form fields are defined as signals, allowing for reactive updates whenever the form state changes. The formValue signal provides a computed value that reflects the current state of the form. This approach offers a more declarative way to manage form state and reactivity, combining the simplicity of template-driven forms with the power of signals.</p>
   
   <p>You may be tempted to define the form directly as an object inside a signal. While such an approach may seem more concise, typing into the individual fields does not dispatch reactivity updates, which is usually a deal breaker. Here’s an example StackBlitz with a component suffering from such an issue:</p>
   
   <p>Therefore, if you'd like to react to changes in the form fields, it's better to define each field as a separate signal. By defining each form field as a separate signal, you ensure that changes to individual fields trigger reactivity updates correctly. </p>
   
   <h3>
     
     
     Example 2: A Complex Form with Signals
   </h3>
   
   <p>You may see little benefit in using signals for simple forms like the login form above, but they truly shine when handling more complex forms. Let's explore a more intricate scenario - a user profile form that includes fields like firstName, lastName, email, phoneNumbers, and address. The phoneNumbers field is dynamic, allowing users to add or remove phone numbers as needed.</p>
   
   <p>Here's how this form might be defined using signals:<br>
   </p>
   
   <pre class="brush:php;toolbar:false">// user-profile.component.ts
   import { JsonPipe } from "@angular/common";
   import { Component, computed, signal } from "@angular/core";
   import { FormsModule, Validators } from "@angular/forms";
   
   @Component({
     standalone: true,
     selector: "app-user-profile",
     templateUrl: "./user-profile.component.html",
     styleUrls: ["./user-profile.component.scss"],
     imports: [FormsModule, JsonPipe],
   })
   export class UserProfileComponent {
     public firstName = signal("");
     public lastName = signal("");
     public email = signal(""); 
     // We need to use a signal for the phone numbers, so we get reactivity when typing in the input fields
     public phoneNumbers = signal([signal("")]);
     public street = signal("");
     public city = signal("");
     public state = signal("");
     public zip = signal("");
   
     public formValue = computed(() => {
       return {
         firstName: this.firstName(),
         lastName: this.lastName(),
         email: this.email(), // We need to do a little mapping here, so we get the actual value for the phone numbers
         phoneNumbers: this.phoneNumbers().map((phoneNumber) => phoneNumber()),
         address: {
           street: this.street(),
           city: this.city(),
           state: this.state(),
           zip: this.zip(),
         },
       };
     });
   
     public formValid = computed(() => {
       const { firstName, lastName, email, phoneNumbers, address } = this.formValue(); // Regex taken from the Angular email validator
   
       const EMAIL_REGEXP = /^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
       const isEmailFormatValid = EMAIL_REGEXP.test(email);
   
       return (
         firstName.length > 0 &&
         lastName.length > 0 &&
         email.length > 0 &&
         isEmailFormatValid &&
         phoneNumbers.length > 0 && // Check if all phone numbers are valid
         phoneNumbers.every((phoneNumber) => phoneNumber.length > 0) &&
         address.street.length > 0 &&
         address.city.length > 0 &&
         address.state.length > 0 &&
         address.zip.length > 0
       );
     });
   
     addPhoneNumber() {
       this.phoneNumbers.update((phoneNumbers) => {
         phoneNumbers.push(signal(""));
         return [...phoneNumbers];
       });
     }
   
     removePhoneNumber(index: number) {
       this.phoneNumbers.update((phoneNumbers) => {
         phoneNumbers.splice(index, 1);
         return [...phoneNumbers];
       });
     }
   }
   

   Notez que le champ phoneNumbers est défini comme un signal d'un tableau de signaux. Cette structure nous permet de suivre les modifications apportées aux numéros de téléphone individuels et de mettre à jour l'état du formulaire de manière réactive. Les méthodes addPhoneNumber et RemovePhoneNumber mettent à jour le tableau de signaux phoneNumbers, déclenchant des mises à jour de réactivité dans le formulaire.
   

   <!-- user-profile.component.html -->
   <formulaire>
   
   
   
   <blockquote>
   <p>Dans le modèle, nous utilisons le tableau de signaux phoneNumbers pour restituer dynamiquement les champs de saisie du numéro de téléphone. Les méthodes addPhoneNumber et RemovePhoneNumber permettent aux utilisateurs d'ajouter ou de supprimer de manière réactive des numéros de téléphone, mettant ainsi à jour l'état du formulaire. Notez l'utilisation de la fonction de suivi, qui est nécessaire pour garantir que la directive ngFor suit correctement les modifications apportées au tableau phoneNumbers.</p>
   </blockquote>
   
   <p>Voici une démo StackBlitz de l'exemple de formulaire complexe avec lequel vous pouvez jouer?:</p>
   
   <h3>
     
     
     Validation des formulaires avec des signaux
   </h3>
   
   <p>La validation est essentielle à tout formulaire, garantissant que la saisie de l'utilisateur répond aux critères requis avant la soumission. Avec les signaux, la validation peut être gérée de manière réactive et déclarative. Dans l'exemple de formulaire complexe ci-dessus, nous avons implémenté un signal calculé appelé formValid, qui vérifie si tous les champs répondent à des critères de validation spécifiques.</p>
   
   <p>La logique de validation peut facilement être personnalisée pour s'adapter à différentes règles, telles que vérifier les formats d'e-mail valides ou garantir que tous les champs obligatoires sont remplis. L'utilisation de signaux de validation vous permet de créer un code plus maintenable et testable, car les règles de validation sont clairement définies et réagissent automatiquement aux modifications dans les champs du formulaire. Il peut même être résumé dans un utilitaire distinct pour le rendre réutilisable sous différentes formes.</p>
   
   <p>Dans l'exemple de formulaire complexe, le signal formValid garantit que tous les champs obligatoires sont remplis et valide le format de l'e-mail et des numéros de téléphone.</p>
   
   <p>Cette approche de validation est un peu simple et doit être mieux connectée aux champs réels du formulaire. Bien que cela fonctionne dans de nombreux cas d'utilisation, dans certains cas, vous souhaiterez peut-être attendre que la prise en charge explicite des ??formes de signal?? soit ajoutée à Angular. Tim Deschryver a commencé à implémenter certaines abstractions autour des formes de signaux, y compris la validation, et a écrit un article à ce sujet. Voyons si quelque chose comme ?a sera ajouté à Angular à l'avenir.</p>
   
   <h3>
     
     
     Pourquoi utiliser des signaux dans des formes angulaires??
   </h3>
   
   <p>L'adoption des signaux dans Angular offre un nouveau moyen puissant de gérer l'état et la réactivité du formulaire. Les signaux offrent une approche flexible et déclarative qui peut simplifier la gestion des formulaires complexes en combinant les atouts des formulaires basés sur des modèles et des formulaires réactifs. Voici quelques avantages clés de l’utilisation de signaux dans les formulaires angulaires?:</p>
   
   <ol>
   <li><p><strong>Gestion déclarative de l'état</strong>?: les signaux vous permettent de définir des champs de formulaire et des valeurs calculées de manière déclarative, rendant votre code plus prévisible et plus facile à comprendre.</p></li>
   <li><p><strong>Réactivité</strong>?: les signaux fournissent des mises à jour réactives des champs du formulaire, garantissant que les modifications apportées à l'état du formulaire déclenchent automatiquement les mises à jour de réactivité.</p></li>
   <li><p><strong>Contr?le granulaire</strong>?: les signaux vous permettent de définir des champs de formulaire à un niveau granulaire, permettant un contr?le précis de l'état et de la validation du formulaire.</p></li>
   <li><p><strong>Formulaires dynamiques</strong>?: les signaux peuvent être utilisés pour créer des formulaires dynamiques avec des champs qui peuvent être ajoutés ou supprimés dynamiquement, offrant ainsi un moyen flexible de gérer des scénarios de formulaires complexes.</p></li>
   <li><p><strong>Simplicité</strong>?: les signaux peuvent offrir un moyen plus simple et plus concis de gérer les états de formulaire que les formulaires réactifs traditionnels, facilitant ainsi la création et la maintenance de formulaires complexes.</p></li>
   </ol>
   
   <h3>
     
     
     Conclusion
   </h3>
   
   <p>Dans mes articles précédents, nous avons exploré les puissantes fonctionnalités des formulaires réactifs angulaires, de la construction de formulaires dynamiques aux contr?les de formulaire personnalisés. Avec l'introduction des signaux, les développeurs Angular disposent d'un nouvel outil qui fusionne la simplicité des formulaires basés sur des modèles avec la réactivité des formulaires réactifs.</p>
   
   <p>Bien que de nombreux cas d'utilisation justifient les formulaires réactifs, les signaux offrent une alternative nouvelle et puissante pour gérer l'état du formulaire dans les applications angulaires nécessitant une approche déclarative plus simple. à mesure qu'Angular continue d'évoluer, expérimenter ces nouvelles fonctionnalités vous aidera à créer des applications plus maintenables et plus performantes.</p>
   
   <p>Bon codage?!</p>
   
   
             
   
               
           

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!