> Как реализовать обработку ввода пользователя в поисковую строку в Angular с использованием реактивных форм (Angular)

Для обработки ввода пользователя в поисковую строку с реактивными формами в Angular создайте FormControl и подпишитесь на его изменения через valueChanges. Вот полный пример:

Компонент (search.component.ts):

TYPESCRIPT
import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
import { SearchService } from './search.service';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html'
})
export class SearchComponent implements OnInit {
  searchControl = new FormControl('');
  results$ = this.searchControl.valueChanges.pipe(
    debounceTime(300),               // задержка 300 мс после последнего ввода
    distinctUntilChanged(),          // игнорировать повторяющиеся значения
    switchMap(query => this.searchService.search(query)) // отмена предыдущего запроса
  );

  constructor(private searchService: SearchService) {}

  ngOnInit() {
    // Дополнительно: подписка для логирования или побочных эффектов
    this.searchControl.valueChanges.subscribe(value => {
      console.log('Текущий запрос:', value);
    });
  }
}

Шаблон (search.component.html):

HTML
<input [formControl]="searchControl" placeholder="Поиск...">
<div *ngIf="results$ | async as results">
  <div *ngFor="let item of results">{{ item.name }}</div>
</div>

Сервис (search.service.ts):

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

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

  search(query: string): Observable<any[]> {
    return this.http.get<any[]>(`/api/search?q=${query}`);
  }
}

Ключевые моменты:

• debounceTime(300) предотвращает частые запросы при быстром вводе.
• distinctUntilChanged() не отправляет запрос, если значение не изменилось.
• switchMap автоматически отменяет предыдущий запрос при новом вводе.
• Используйте async пайп в шаблоне для автоматической подписки/отписки.

Для простых случаев без HTTP можно использовать filter и tap для локальной фильтрации данных.