Comment utiliser patchValue sur un formulaire ?

Voici comment utiliser patchValue sur un formulaire Angular:

Créez d'abord un formulaire en utilisant FormGroup et FormControl:

import { FormGroup, FormControl } from '@angular/forms';

export class ExampleFormComponent {
  form = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl('')
  });
}

import { FormGroup, FormControl } from '@angular/forms';

export class ExampleFormComponent {
  form = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl('')
  });
}

Dans votre template HTML, vous pouvez alors utiliser formGroup pour lier votre formulaire au template:

html

<form [formGroup]="form">
  <label>
    Prénom:
    <input type="text" formControlName="firstName">
  </label>
  <br>
  <label>
    Nom de famille:
    <input type="text" formControlName="lastName">
  </label>
</form>

<form [formGroup]="form">
  <label>
    Prénom:
    <input type="text" formControlName="firstName">
  </label>
  <br>
  <label>
    Nom de famille:
    <input type="text" formControlName="lastName">
  </label>
</form>

Pour utiliser patchValue, vous pouvez appeler la méthode patchValue sur votre FormGroup et passer un objet qui contient les valeurs à mettre à jour:

import { Component } from '@angular/core';

@Component({
  selector: 'example-form',
  templateUrl: './example-form.component.html'
})
export class ExampleFormComponent {
  form = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl('')
  });

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

import { Component } from '@angular/core';

@Component({
  selector: 'example-form',
  templateUrl: './example-form.component.html'
})
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'
});

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:

Créez un service qui effectue une requête HTTP pour récupérer des données du serveur:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

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

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

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

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

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

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

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

Dans votre composant, injectez le service de données et appelez la méthode getData pour récupérer les données du serveur:

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

@Component({
  selector: 'example-form',
  templateUrl: './example-form.component.html'
})
export class ExampleFormComponent {
  form = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl('')
  });

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.getData().subscribe(data => {
      // Mettre à jour le formulaire avec les données reçues du serveur
      this.form.patchValue(data);
    });
  }
}

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

@Component({
  selector: 'example-form',
  templateUrl: './example-form.component.html'
})
export class ExampleFormComponent {
  form = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl('')
  });

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.getData().subscribe(data => {
      // Mettre à jour le formulaire avec les données reçues du serveur
      this.form.patchValue(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

Comment utiliser patchValue sur un formulaire ? ​

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

Comment utiliser patchValue sur un formulaire ?

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