Skip to content

Ecouter les changements sur FromControl à l'aide d'un Observable

Voici un exemple d'utilisation d'un observable sur un FormControl avec les opérateurs debounceTime et distinctUntilChanged dans Angular :

ts
import { Component, OnInit } from '@angular/core';
import { ReactiveFormsModule, FormControl } from '@angular/forms';
import { debounceTime, distinctUntilChanged } from 'rxjs';

@Component({
  selector: 'app-my-component',
  imports: [ReactiveFormsModule],
  template: `
    <input type="text" [formControl]="searchField">
  `
})
export class MyComponentComponent implements OnInit {
  searchField = new FormControl()

  ngOnInit() {
    this.searchField.valueChanges
      .pipe(
          debounceTime(400), 
          distinctUntilChanged()
      )
      .subscribe(term => this.search(term));
  }

  search(term: string) {
    console.log(`Searching for ${term}...`);
  }
}

Dans ce code, nous avons un composant qui possède un champ de recherche sous la forme d'un FormControl. Nous avons également un observable qui écoute les changements de valeur du FormControl. Lorsqu'un changement de valeur est détecté, l'observable attend 400 millisecondes avant de continuer afin d'éviter les appels de fonction trop fréquents. L'opérateur distinctUntilChanged permet de n'émettre la valeur que si elle a effectivement changé par rapport à la précédente. Ainsi, lorsque l'utilisateur a terminé de taper dans le champ de recherche, l'observable émet la valeur finale et appelle la fonction de recherche avec cette valeur en tant qu'argument.

[Vidéo] Les signaux dans Angular en 3mn

En juillet, recevez notre newsletter avec les dernières actualités et, en avant-première, un lien vers notre prochaine vidéo sur les signaux dans Angular.