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:

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:

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:

example-form.component.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);
    });
  }
}

data.service.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