📢 Je vous présente le livre Angular

  • 1) Il offre un contenu clair et concis, tout en couvrant une multitude de concepts d'Angular.
  • 2) Le livre est structuré en trois niveaux : débutant, intermédiaire et avancé
  • 3) traite des pratiques les plus récentes d'Angular, comme les signaux, les vues différées, la gestion des flux, entre autres
  • 4) De plus, vous y trouverez plusieurs liens vers des exemples de code source pour approfondir vos connaissances en pratique.
Consulter un extrait

Skip to content

Comment utiliser patchValue sur un formulaire ?

Voici comment utiliser patchValue sur un formulaire Angular:

  1. Créez d'abord un formulaire en utilisant FormGroup et FormControl:
ts
import { Component } from '@angular/core';
import { ReactiveFormsModule, FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'example-form',
  imports: [ReactiveFormsModule],
  standalone: true,
  template: `
    <form [formGroup]="form">
    <label>
      Prénom:
      <input type="text" formControlName="firstName">
    </label>
    <br>
    <label>
      Nom de famille:
      <input type="text" formControlName="lastName">
    </label>
  </form>
  `
})
export class ExampleFormComponent {
  form = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl('')
  });

  submit() {
    this.form.patchValue({
      firstName: 'John',
      lastName: 'Doe'
    });
  }
}

Dans cet exemple, lorsque submit est appelé, les valeurs du formulaire seront mises à jour pour remplacer "firstName" par "John" et "lastName" par "Doe".

Vous pouvez également utiliser patchValue pour mettre à jour un sous-ensemble de champs de formulaire en passant un objet qui ne contient que les champs à mettre à jour. Par exemple, si vous souhaitez uniquement mettre à jour le champ "firstName", vous pouvez appeler:

ts
this.form.patchValue({
  firstName: 'John'
});

Exemple avec le résultat d'une requête HTTP

Voici un exemple de comment utiliser patchValue avec le résultat d'une requête HTTP dans Angular. Dans votre composant, injectez le service de données et appelez la méthode getData pour récupérer les données du serveur:

ts
import { Component, inject, OnInit } from '@angular/core';
import { ReactiveFormsModule, FormGroup, FormControl } from '@angular/forms';
import { DataService } from './data.service';

@Component({
  selector: 'example-form',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './example-form.component.html'
})
export class ExampleFormComponent implements OnInit {
  private dataService = inject(DataService);
  form = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl('')
  });

  ngOnInit() {
    this.dataService.getData().subscribe(data => {
      // Mettre à jour le formulaire avec les données reçues du serveur
      this.form.patchValue(data);
    });
  }
}
ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

type User = { firstName: string, lastName: string }

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private http = inject(HttpClient);

  getData(): Observable<User> {
    return this.http.get<User>('https://example.com/api/data');
  }
}

Dans cet exemple, lorsque le composant est initialisé, une requête HTTP est envoyée pour récupérer les données du serveur. Lorsque les données sont reçues, le formulaire est mis à jour avec patchValue en utilisant les données reçues du serveur.

WARNING

Pour que ça fonctionne, il faut que les clés de l'objet de la réponse de la requête soient équivalentes aux noms des champs du formulaire. Ici, la requête https://example.com/api/data doit envoyer un objet avec les propriétés firstName et lastName

Chaque mois, recevez en avant-première notre newsletter avec les dernières actualités, tutoriels, astuces et ressources Angular directement par email !