Que sont les formulaires réactifs et quand les utiliser ?

L’un des deux types de validation de formulaire intégrée à partir d’Angular, les formulaires réactifs nous permettent de créer des objets de formulaire et de les lier à des formulaires, ce qui nous permet d’ajouter une validation.

Angular intègre la validation de formulaire en tant que fonctionnalité. Cela nous permet d’ajouter facilement des formulaires avec validation. Il est livré avec deux types de formulaires. L’un est constitué de formulaires basés sur des modèles et l’autre de formulaires réactifs.

Les formulaires basés sur des modèles nous permettent d’ajouter des directives pour lier les valeurs d’entrée aux valeurs réactives et également pour ajouter une validation de formulaire.

Les formulaires réactifs fonctionnent en nous permettant de créer des objets de formulaire et de les lier à des formulaires, ce qui nous permet d’ajouter une validation. Il lie les valeurs d’entrée aux propriétés des objets de forme réactive afin que nous puissions accéder aux valeurs d’entrée et les valider.

Dans cet article, nous verrons ce que sont les formulaires réactifs et comment les utiliser.

Que sont les formes réactives ?

Les objets de formulaires réactifs sont des objets qui nous fournissent un accès synchrone aux données de valeur de formulaire. Ils sont construits à partir d’observables, donc les valeurs d’entrée et la valeur des données auxquelles elles se lient sont synchrones. Chaque changement dans un état de formulaire renvoie un nouvel état.

Ceci est différent des formulaires basés sur des modèles puisque les modifications sont asynchrones dans les formulaires basés sur des modèles.

La nature synchrone des formulaires réactifs facilite le test des formulaires réactifs par rapport aux formulaires basés sur des modèles.

Quand utilisons-nous des formulaires réactifs ?

Les formulaires réactifs doivent être utilisés dans la plupart des applications Angular.

Le seul avantage des formulaires basés sur des modèles par rapport aux formulaires réactifs est que la syntaxe des formulaires basés sur des modèles est plus proche des formulaires Angular.js. Par conséquent, l’utilisation de formulaires basés sur des modèles faciliterait la migration des applications Angular.js vers Angular.

En dehors de cela, il n’y a pas beaucoup d’avantages à utiliser des formulaires basés sur des modèles dans nos applications Angular. Donc, à moins que nous ne migrions les applications Angular.js vers Angular, nous devrions nous en tenir aux formulaires réactifs.

L’immuabilité et la prévisibilité dues aux mises à jour synchrones des formulaires réactifs facilitent grandement le développement. De plus, les formulaires réactifs nous permettent de définir explicitement la structure du formulaire afin qu’il soit facile à comprendre et meilleur pour l’évolutivité.

Utilisation des formulaires réactifs

Pour découvrir l’utilité des formulaires réactifs, nous allons en créer un.

Nous commençons par importer le ReactiveFormsModule en écrivant:

app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { ReactiveFormsModule } from "@angular/forms";

import { AppComponent } from "./app.component";

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

Nous importons ReactiveFormsModule dans notre module Angular afin que nous puissions créer des formulaires réactifs dans les composants de AppModule.

Ensuite, nous créons un objet groupe de formulaire dans un composant en écrivant :

app.component.ts

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

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  signUpForm = new FormGroup({
    firstName: new FormControl("", [
      Validators.required,
      Validators.minLength(5)
    ]),
    lastName: new FormControl("", [
      Validators.required,
      Validators.minLength(5)
    ]),
    address: new FormGroup({
      street: new FormControl("", [
        Validators.required,
        Validators.minLength(5)
      ]),
      city: new FormControl("", [Validators.required, Validators.minLength(5)]),
      region: new FormControl("", [Validators.required])
    })
  });

  updateProfile() {
    this.signUpForm.patchValue({
      firstName: "Jane",
      lastName: "Smith",
      address: {
        street: "123 1st Street"
      }
    });
  }

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

Nous avons ajouté un FormGroup objet dans notre AppComponent. Nous l’avons créé en ajoutant des champs dans l’objet dans lequel nous sommes passés FormGroup.

L’objet a les noms de champs comme clés de propriété, que nous utiliserons pour associer aux champs de saisie afin de pouvoir lier les valeurs d’entrée aux valeurs des composants et fournir une validation pour chaque champ.

Les valeurs sont FormControl objets. Nous transmettons la valeur initiale et un tableau de validateurs dans FormControl respectivement.

Angular fournit une variété de validateurs de champs de formulaire dans le Validators objet. Nous créons un champ de formulaire obligatoire avec Validators.required et imposez une longueur minimale de valeurs d’entrée avec
Validators.minLength.

Nous pouvons manipuler des formulaires dans le code du composant. Dans le updateProfile méthode, nous appelons this.signUpForm.patchValue pour mettre à jour la valeur d’entrée du firstName,
lastName et address.street des champs. Et nous obtenons les valeurs d’entrée de tous les champs en utilisant le this.signUpForm.value propriété.

Ensuite, dans notre modèle, nous ajoutons le code HTML de notre formulaire. Dans app.component.htmlnous écrivons:

<form [formGroup]="signUpForm" (ngSubmit)="onSubmit()">
  <label for="first-name">First Name: </label>
  <input id="first-name" type="text" formControlName="firstName" />

  <div
    *ngIf="signUpForm.controls.firstName.invalid && (signUpForm.controls.firstName.dirty || signUpForm.controls.firstName.touched)"
  >
    <div *ngIf="signUpForm.controls.firstName.errors?.required">
      First name is required.
    </div>
    <div *ngIf="signUpForm.controls.firstName.errors?.minlength">
      First name must be at least 5 characters long.
    </div>
  </div>
  <br />

  <label for="last-name">Last Name: </label>
  <input id="last-name" type="text" formControlName="lastName" />

  <div
    *ngIf="signUpForm.controls.lastName.invalid && (signUpForm.controls.firstName.dirty || signUpForm.controls.lastName.touched)"
  >
    <div *ngIf="signUpForm.controls.lastName.errors?.required">
      Last name is required.
    </div>
    <div *ngIf="signUpForm.controls.lastName.errors?.minlength">
      Last name must be at least 5 characters long.
    </div>
  </div>
  <br />

  <div formGroupName="address">
    <h2>Address</h2>

    <label for="street">Street: </label>
    <input id="street" type="text" formControlName="street" />
    <br />

    <div
      *ngIf="signUpForm.controls.address.controls.street.invalid && (signUpForm.controls.address.controls.street.dirty || signUpForm.controls.address.controls.street.touched)"
    >
      <div *ngIf="signUpForm.controls.address.controls.street.errors?.required">
        Last name is required.
      </div>
      <div
        *ngIf="signUpForm.controls.address.controls.street.errors?.minlength"
      >
        Last name must be at least 5 characters long.
      </div>
    </div>

    <label for="city">City: </label>
    <input id="city" type="text" formControlName="city" />
    <br />

    <label for="region">Region: </label>
    <input id="region" type="text" formControlName="region" />
    <br />

    <button type="button" (click)="updateProfile()">Update Profile</button>
    <button type="submit" [disabled]="!signUpForm.valid">Submit Profile</button>
  </div>
</form>

Pour associer l’objet groupe de formulaire à un formulaire HTML, nous définissons le [formGroup] attribuer au nom du FormGroup instance que nous avons définie dans notre composant.

Nous fixons (ngSubmit) à onSubmit() appeler onSubmit lorsque nous soumettons le formulaire.

Et nous avons fixé le formControlName attribuer au nom du FormControl instance pour associer l’objet de contrôle de formulaire au champ de formulaire. Cela liera la valeur d’entrée à la valeur de l’objet de contrôle de formulaire et nous permettra également d’ajouter une validation en vérifiant les propriétés dans l’objet de contrôle de formulaire.

Pour obtenir les états de validation des objets de contrôle de formulaire, nous utilisons le signUpForm.controls propriété. Nous utilisons signUpForm.controls.firstName pour obtenir l’état de validation du firstName contrôle des formulaires. Et nous faisons de même avec lastName.

Nous obtenons les erreurs de validation du firstName contrôle de formulaire avec signUpForm.controls.firstName.errors.

Pour vérifier si l’ensemble du formulaire est valide, nous utilisons le signUpForm.valid propriété.

Pour associer un groupe de champs à un groupe de formulaires, nous définissons le formGroupName attribut comme nous l’avons fait avec le div pour associer les champs du groupe de formulaire au address former un groupe.

Pour obtenir l’état de validation des champs imbriqués, nous continuons à utiliser le controls propriété.

Nous obtenons le street champ avec signUpForm.controls.address.controls.street. Et les états de validation sont dans cet objet.

Avec les formulaires réactifs, nous pouvons lier les valeurs d’entrée aux valeurs des propriétés des composants et ajouter facilement une validation en créant un objet unique. En outre, nous pouvons mettre à jour les valeurs d’entrée avec cet objet avec patchValue. Et nous associons les champs de saisie HTML aux objets de contrôle de formulaire avec quelques attributs.

Toutes ces opérations sont synchrones, le flux de travail est donc prévisible.

Les validateurs sont explicitement ajoutés aux contrôles de formulaire afin que nous puissions lire et modifier facilement la validation de chaque champ. Et Angular fournit de nombreux validateurs pour les formulaires réactifs afin que nous puissions en utiliser plusieurs au lieu d’écrire notre propre logique de validation. Les champs de formulaire imbriqués sont également faciles à ajouter puisque nous pouvons imbriquer des groupes de formulaires.

Par conséquent, il n’existe pas vraiment de cas d’utilisation pour l’utilisation de formulaires basés sur des modèles ou pour la création de nos propres solutions de validation de formulaire.

Les formulaires réactifs sont fournis en standard avec Angular, nous n’avons donc rien à installer pour les utiliser.

Conclusion

Angular intègre la validation de formulaire en tant que fonctionnalité. Cela nous permet d’ajouter facilement des formulaires avec validation. Il est livré avec deux types de formulaires : les formulaires réactifs et les formulaires basés sur des modèles.

Les formulaires basés sur des modèles nous permettent d’ajouter des directives pour lier les valeurs d’entrée aux valeurs réactives et également pour ajouter une validation de formulaire.

Les formulaires réactifs fonctionnent en nous permettant de créer des objets de formulaire et de les lier à des formulaires, ce qui nous permet d’ajouter une validation. Il lie les valeurs d’entrée aux propriétés des objets de forme réactive afin que nous puissions accéder aux valeurs d’entrée et les valider. Cela nous permet également d’ajouter une validation de formulaire de manière explicite et nous pouvons utiliser les validateurs fournis pour ajouter des validations aux champs.

À partir des groupes, organisons les champs de formulaires en groupes et nous pouvons facilement imbriquer les groupes de formulaires. Nous pouvons également obtenir et définir facilement les valeurs du formulaire de manière synchrone avec les formulaires réactifs.

Par conséquent, les formulaires réactifs sont meilleurs que les formulaires basés sur des modèles ou la création de nos propres solutions de liaison et de validation de champs de formulaire dans presque tous les cas.