Utiliser setValue dans Reactive forms, onChanges et typescript – Guide pour débuter avec Angular 18 #011

Bienvenue dans ce tutoriel sur la gestion des ReactiveForms et des changements dans Angular 18. Dans cet article, nous allons nous concentrer sur la méthode setValue et sur la gestion des changements avec la méthode onChanges en TypeScript.

Prérequis

Avant de commencer ce tutoriel, assurez-vous d’avoir Angular installé sur votre machine. Si ce n’est pas le cas, vous pouvez suivre les instructions sur le site officiel d’Angular pour l’installation.

Initialisation d’un formulaire réactif

Pour commencer, nous allons créer un formulaire réactif dans notre composant Angular. Pour cela, nous devons importer FormGroup et FormBuilder depuis @angular/forms. Voici un exemple de création d’un formulaire réactif avec deux champs, name et email, dans notre composant :

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

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['./my-form.component.css']
})
export class MyFormComponent implements OnInit {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      name: '',
      email: ''
    });
  }

  ngOnInit(): void {
  }

}

Utilisation de la méthode setValue

La méthode setValue permet de définir explicitement les valeurs des champs d’un formulaire réactif. Voici un exemple d’utilisation de setValue pour affecter des valeurs à notre formulaire :

this.myForm.setValue({
  name: 'John Doe',
  email: 'john.doe@example.com'
});

Utilisation de la méthode patchValue

En plus de setValue, Angular fournit également la méthode patchValue pour mettre à jour les valeurs d’un formulaire réactif. La principale différence entre les deux est que patchValue permet de mettre à jour sélectivement les valeurs sans écraser les autres champs. Voici un exemple d’utilisation de patchValue :

this.myForm.patchValue({
  email: 'jane.doe@example.com'
});

Gestion des changements avec onChanges

Pour détecter les changements dans notre formulaire réactif, nous pouvons utiliser la méthode onChanges de Angular. Cette méthode nous permet d’écouter les changements sur un groupe de formulaires ou sur des champs individuels. Voici un exemple d’utilisation de onChanges pour écouter les changements sur le champ name de notre formulaire :

this.myForm.get('name').valueChanges.subscribe((value) => {
  console.log('Name field changed: ', value);
});

Conclusion

Dans ce tutoriel, nous avons abordé la méthode setValue pour définir les valeurs d’un formulaire réactif, la méthode patchValue pour mettre à jour sélectivement les valeurs, et la méthode onChanges pour écouter les changements dans les champs d’un formulaire. En combinant ces méthodes, vous pourrez gérer efficacement les valeurs et les changements dans vos formulaires réactifs en Angular 18.