如何使用Input和FormControl创建筛选器？Angular 11问题求助

1. 替换废弃的ngModel为FormControl #

首先在组件类中初始化FormControl，通过响应式表单的方式替代ngModel的双向绑定逻辑：

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

@Component({
  selector: 'app-search-input',
  template: `
    <input type="text" [formControl]="searchControl" placeholder="输入搜索内容">
    <ul *ngIf="filteredResults.length">
      <li *ngFor="let item of filteredResults" (click)="selectItem(item)">{{item.label}}</li>
    </ul>
  `
})
export class SearchInputComponent implements OnInit {
  searchControl = new FormControl('');
  // 示例数据源，可根据实际业务替换
  allData = [
    { id: 1, label: 'Angular' },
    { id: 2, label: 'React' },
    { id: 3, label: 'Vue' }
  ];
  filteredResults: any[] = [];

  ngOnInit() {
    // 监听输入变化，防抖后执行筛选
    this.searchControl.valueChanges.pipe(
      debounceTime(300), // 300ms防抖，减少频繁筛选
      distinctUntilChanged() // 输入值未变化时不重复触发
    ).subscribe(value => {
      this.filterResults(value);
    });
  }

  filterResults(searchTerm: string) {
    if (!searchTerm.trim()) {
      this.filteredResults = [];
      return;
    }
    this.filteredResults = this.allData.filter(item => 
      item.label.toLowerCase().includes(searchTerm.toLowerCase())
    );
  }
}

2. 修复选中结果后FormControl同步问题 #

当用户点击搜索结果项时，直接调用FormControl的setValue方法更新输入值，同时清空筛选结果列表：

selectItem(item: any) {
  // 同步更新FormControl的值，Input会自动同步显示
  this.searchControl.setValue(item.label);
  // 清空筛选结果，隐藏下拉列表
  this.filteredResults = [];
}

核心要点说明 #

• 利用valueChanges监听输入变化，配合RxJS操作符优化筛选性能，避免频繁触发筛选逻辑
• 选中项时通过setValue确保FormControl与Input内容完全同步，彻底替代ngModel的双向绑定
• 若需与父组件表单联动，可将FormControl通过@Input从父组件传入，或通过@Output事件传递选中结果

内容的提问来源于stack exchange，提问作者THIAGO DE BONIS