Appearance
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.
Références