Créer un formulaire réactif Angular avec validation d'affichage

Apprenez à créer des formulaires réactifs Angular avec validation d'affichage. Ce guide couvre tout, de la configuration de votre formulaire à l'ajout de règles de validation.

Les formulaires réactifs Angular sont un élément essentiel de la création d'applications Web modernes. Ces formulaires permettent une approche plus rationalisée de la gestion de la saisie et de la validation des données, et ils sont hautement personnalisables. Dans cet article de blog, nous allons explorer comment créer un formulaire réactif Angular avec validation d'affichage.

Conditions préalables

Vous devez avoir une compréhension de base des formes Angular et réactives. Si vous n'êtes pas familier avec ces sujets, vous pouvez consulter la documentation officielle d'Angular sur le  portail .

J'ai utilisé les outils ci-dessous pour préparer ce tutoriel.

• CLI angulaire - 15.1.6
• Nœud : 18.14.0
• MNP – 9.3.1
• Code Visual Studio

Pour commencer, supposons que nous disposions d'un formulaire simple qui collecte des informations utilisateur de base telles que le nom, l'e-mail et le numéro de téléphone. Nous allons créer un FormGroup dans notre composant pour contenir nos contrôles et validateurs de formulaire :

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

@Component({
    selector: 'app-user-form',
    templateUrl: './userform.component.html',
    styleUrls: ['./userform.component.scss']
})
export class UserformComponent implements OnInit {
    userform: FormGroup = new FormGroup({
        name: new FormControl(''),
        email: new FormControl(''),
        phone: new FormControl('')
    });
    submitted = false;
    constructor(private fb: FormBuilder) {}
    ngOnInit(): void {
        this.userform = this.fb.group({
            name: ['', Validators.required],
            email: ['', [Validators.required, Validators.email]],
            phone: ['', [Validators.required, Validators.minLength(10)]]
        });
    }
    get f(): {
        [key: string]: AbstractControl
    } {
        return this.userform.controls;
    }
    onSubmit(): void {
        this.submitted = true;
        if (this.userform.invalid) {
            return;
        }
        console.log(JSON.stringify(this.userform.value, null, 2));
    }
}

Nous utilisons le service FormBuilder pour créer nos contrôles et validateurs de formulaire. Le contrôle du nom est requis, le contrôle de l'e-mail est requis et doit être une adresse e-mail valide, et le contrôle du téléphone est requis et doit comporter au moins 10 chiffres.

Maintenant que nous avons configuré notre formulaire, nous pouvons l'utiliser dans notre modèle :

<div class="register-form">
<form  (ngSubmit)="onSubmit()" [formGroup]="userform">
    <div class="form-group">
      <label>Name:</label>
      <input type="text" formControlName="name"
      class="form-control"
      [ngClass]="{ 'is-invalid': submitted && f['name'].errors }"
      >
      <div *ngIf="submitted && f['name'].errors" class="invalid-feedback">
        <div *ngIf="f['name'].errors['required']">
          Name is required
        </div>
      </div>
    </div>

    <div class="form-group">
      <label>Email:</label>
      <input type="email" formControlName="email"
      class="form-control"
      [ngClass]="{ 'is-invalid': submitted && f['email'].errors }"
      >
      <div *ngIf="submitted && f['email'].errors" class="invalid-feedback">
        <div *ngIf="f['email'].errors['required']">
          Email is required
        </div>
        <div *ngIf="f['email'].errors['email']">
          Email is not valid
        </div>
      </div>
    </div>

    <div class="form-group">
      <label>Phone:</label>
      <input type="tel" formControlName="phone"
      class="form-control"
      [ngClass]="{ 'is-invalid': submitted && f['phone'].errors }"
      minlength="10" maxlength="11">
      <div *ngIf="submitted && f['phone'].errors" class="invalid-feedback">
        <div *ngIf="f['phone'].errors['required']">
              Phone is required
        </div>
            <div *ngIf="f['phone'].errors['minlength']">
              Phone must be at least 10 digits
            </div>
        </div>
    </div>
    <div class="form-group">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
  </form>
</div>

Dans notre modèle, nous lions notre formGroup à la propriété userForm de notre composant. Nous utilisons également la directive formControlName pour lier chaque champ d'entrée à son contrôle respectif.

Nous affichons des messages de validation pour chaque contrôle à l'aide de la directive *ngIf d'Angular. Nous vérifions si le contrôle est invalide et s'il est sale ou touché. Si c'est le cas, nous affichons le message d'erreur correspondant. Par exemple, si le contrôle du nom est requis et que l'utilisateur n'a rien saisi, nous afficherons le message d'erreur "Le nom est requis".

Nous désactivons également le bouton d'envoi si le formulaire n'est pas valide, ce qui signifie que des erreurs de validation sont présentes.

Maintenant que notre formulaire est configuré et affiche les messages de validation, nous devons gérer la soumission du formulaire dans notre composant. Nous allons créer une méthode onSubmit() qui enregistrera les données du formulaire dans la console :

onSubmit(): void {
    this.submitted = true;
    if (this.userform.invalid) {
        return;
    }
    console.log(JSON.stringify(this.userform.value, null, 2));
}

L'exemple de capture d'écran est donné ci-dessous.

Et c'est tout! Nous avons créé un formulaire Angular Reactive avec validation d'affichage avec seulement quelques lignes de code. Ce formulaire est hautement personnalisable et peut être étendu pour collecter facilement des données plus complexes.

Le code source peut être téléchargé depuis GitHub

#angular