Qu’est-ce qu’un FormGroup et comment l’utiliser

Dans cet article, nous découvrons les FormGroups dans les formulaires réactifs et comment les utiliser pour valider les champs de formulaire dans votre application Angular.

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 basés sur des modèles et les 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 examinerons les FormGroups dans 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, de sorte que les valeurs d’entrée et la valeur des données auxquelles elles se lient sont synchrones.

Les formulaires réactifs nous permettent de lier explicitement les champs de saisie aux valeurs de modèle en dehors du modèle. Et nous pouvons utiliser les validateurs intégrés d’Angular pour valider les champs de formulaire dans FormGroups avec des formulaires réactifs.

Création de formulaires réactifs avec FormGroups

Nous pouvons créer facilement des FormGroups avec Angular.

La première étape consiste à importer le ReactiveFormsModule dans notre application. Pour le faire, dans app.module.tsnous écrivons:

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

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

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

Ensuite dans notre composant, nous ajoutons le FormGroup:

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({
    name: new FormControl("", [Validators.required, Validators.minLength(5)]),
    birthDate: new FormGroup({
      day: new FormControl("", [
        Validators.required,
        Validators.min(1),
        Validators.max(31),
      ]),
      month: new FormControl("", [
        Validators.required,
        Validators.min(1),
        Validators.max(12),
      ]),
      year: new FormControl("", [
        Validators.required,
        Validators.min(1900),
        Validators.max(new Date().getFullYear()),
      ]),
    }),
  });

  updateProfile() {
    this.signUpForm.patchValue({
      name: "Jane",
      birthDate: {
        day: "1",
        month: "1",
        year: "2000",
      },
    });
  }

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

Nous ajoutons le FormGroup avec le FormGroup constructeur. Nous l’utilisons en passant un objet avec les noms des champs comme clés et FormControl et autre FormGroups comme les valeurs.

FormGroups peuvent être imbriqués dans d’autres FormGroups.

Nous ajoutons des champs en utilisant le FormControl constructeur. Le premier argument est la valeur initiale du champ du formulaire. Et le deuxième argument est un tableau de règles de validation, que nous ajoutons en référençant diverses propriétés du Validators objet.

Validators.required rend un champ obligatoire.

Validators.minLength est une fonction qui définit la longueur minimale acceptable de la valeur du champ.

Validators.min nous permet de spécifier un nombre minimum valide pour un champ. Validators.max nous permet de spécifier un nombre maximum valide pour un champ.

Nous pouvons appeler patchValue sur le FormGroup pour mettre à jour la valeur des champs par programmation.

Nous pouvons obtenir les valeurs d’entrée avec le FormGroup value propriété comme cela se fait dans le submit méthode.

Ensuite, dans le modèle, nous ajoutons :

app.component.html

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

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

  <br />

  <div formGroupName="birthDate">
    <h2>Birth Date</h2>

    <label for="day">Day: </label>
    <input id="day" type="text" formControlName="day" />
    <br />

    <div
      *ngIf="signUpForm.controls.birthDate.controls.day.invalid && (signUpForm.controls.birthDate.controls.day.dirty || signUpForm.controls.birthDate.controls.day.touched)"
    >
      <div
        *ngIf="signUpForm.controls.birthDate.controls.day.errors?.['required']"
      >
        Day is required.
      </div>
      <div *ngIf="signUpForm.controls.birthDate.controls.day.errors?.['min']">
        Invalid day.
      </div>
    </div>

    <label for="month">Month: </label>
    <input id="month" type="text" formControlName="month" />
    <br />

    <label for="year">Year: </label>
    <input id="year" type="text" formControlName="year" />
    <br />

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

pour lier le FormGroup au formulaire.

Nous fixons le [formGroup] à signUpForm lier le signUpForm FormGroup à ce formulaire. Nous accédons aux champs du FormGroup avec le signUpForm variable.

Le invalid property est une valeur booléenne qui nous permet de vérifier la validité. dirty est une autre propriété booléenne qui nous permet de vérifier si les champs du formulaire ont été manipulés ou non.

Nous pouvons accéder à toutes les erreurs des règles avec le errors propriété. C’est un objet avec des paires clé-valeur avec les règles comme clés et les valeurs des règles comme valeurs.

Nous devons également définir le formControlName attribut au nom du champ tel que spécifié lorsque nous avons déclaré le FormGroup pour lier le champ de saisie HTML au champ FromGroup du même nom et vérifier les règles de validation de formulaire spécifiées.

Il lie également la valeur d’entrée à la propriété FormGroup avec le nom du champ comme nom de clé.

Quand on clique updateProfile, patchValue est appelé sur le FormGroup pour mettre à jour les champs.

Créer un tableau de FromGroups avec FormArrays

Nous pouvons créer un tableau de FormGroups avec FormArrays. De cette façon, nous pouvons restituer à plusieurs reprises le même FormGroup.

Pour ce faire, nous écrivons :

app.component.ts

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

const createFormGroupObj = () => ({
  name: new FormControl("", [Validators.required, Validators.minLength(5)]),
  birthDate: new FormGroup({
    day: new FormControl("", [
      Validators.required,
      Validators.min(1),
      Validators.max(31),
    ]),
    month: new FormControl("", [
      Validators.required,
      Validators.min(1),
      Validators.max(12),
    ]),
    year: new FormControl("", [
      Validators.required,
      Validators.min(1900),
      Validators.max(new Date().getFullYear()),
    ]),
  }),
});

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  signUpForm = new FormGroup(createFormGroupObj());
  signUpFormArray = new FormArray([this.signUpForm]);

  addSignUpForm() {
    const signUpForm = new FormGroup(createFormGroupObj());
    this.signUpFormArray.push(signUpForm);
  }

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

pour ajouter le signUpFormArrayqui est un exemple de FormArray constructeur. On l’initialise avec un tableau avec un signUpForm FormGroup à l’intérieur.

Aussi, nous ajoutons le addSignUpForm méthode qui appelle signUpFormArray.push pour en ajouter un autre signUpForm FormGroup au FormArray.

Et nous obtenons toutes les valeurs des champs de formulaire du FormArray avec le value propriété.

Nous devons passer des objets séparés dans FormGroup donc chaque FromGroup a des champs séparés. Pour ce faire, nous créons le createFormGroupObj pour renvoyer un objet avec les propriétés dans lesquelles nous passons
FormGroupqui sont les champs de chaque formulaire du FormArray.

Ensuite, dans le modèle de composant, nous ajoutons :

app.component.html

<div *ngFor="let signUpForm of signUpFormArray.controls">
  <h1>Person</h1>
  <form [formGroup]="signUpForm">
    <label for="first-name">First Name: </label>
    <input id="first-name" type="text" formControlName="name" />

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

    <br />

    <div formGroupName="birthDate">
      <h2>Birth Date</h2>

      <label for="day">Day: </label>
      <input id="day" type="text" formControlName="day" />
      <br />

      <div
        *ngIf="
          signUpForm.controls.birthDate.controls.day.invalid &&
          (signUpForm.controls.birthDate.controls.day.dirty ||
            signUpForm.controls.birthDate.controls.day.touched)
        "
      >
        <div
          *ngIf="
            signUpForm.controls.birthDate.controls.day.errors?.['required']
          "
        >
          Day is required.
        </div>
        <div *ngIf="signUpForm.controls.birthDate.controls.day.errors?.['min']">
          Invalid day.
        </div>
      </div>

      <label for="month">Month: </label>
      <input id="month" type="text" formControlName="month" />
      <br />

      <label for="year">Year: </label>
      <input id="year" type="text" formControlName="year" />
    </div>
  </form>
</div>

<button type="button" (click)="addSignUpForm()">Add Person</button>
<button type="submit" (click)="onSubmit()" [disabled]="!signUpFormArray.valid">
  Submit Profile
</button>

pour rendre le signUpFormArray FormArray.

Les seules modifications que nous avons apportées sont le rendu de FormArray en accédant aux FormGroups dans FormArray avec signUpFormArray.controls.

Les valeurs de validation sont accessibles de la même manière qu’un formulaire unique.

Conclusion

Angular intègre la validation de formulaire en tant que fonctionnalité. Cela nous permet d’ajouter facilement des formulaires avec validation avec des formulaires réactifs

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. Les formulaires réactifs nous permettent de lier les valeurs d’entrée aux propriétés des objets de formulaire réactif afin que nous puissions accéder aux valeurs d’entrée et les valider.

Nous pouvons créer un groupe de champs de formulaire avec FormGroups. Et nous pouvons regrouper les FormGroups avec FormArrays.