Angular

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 } from '@angular/core';
import { FormControl } from '@angular/forms';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent {
  searchField: FormControl;

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

  search(term: string) {
    console.log(`Searching for ${term}...`);
  }
}
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent {
  searchField: FormControl;

  constructor() {
    this.searchField = new FormControl();
    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