Angular 17中FormControl valueChanges未触发Material自动完成筛选

1. 确保表单与模板正确绑定 #

在表单外层添加formGroup绑定，否则formControlName无法关联到组件中的表单实例：

<form [formGroup]="createBookingForm">
  <!-- 原有的mat-form-field代码 -->
</form>

2. 补全表单变量声明 #

在组件类顶部添加FormGroup类型声明（当前代码片段缺失该部分）：

import { FormGroup } from '@angular/forms';

// ...

createBookingForm!: FormGroup;

3. 检查过滤方法实现 #

确保_filterCities方法逻辑正确，且组件存在城市数据源：

// 示例城市列表，替换为你的实际数据源
private cities: string[] = ['Beijing', 'Shanghai', 'Guangzhou', 'Shenzhen'];

private _filterCities(value: string): string[] {
  if (!value) return this.cities;
  const filterValue = value.trim().toLowerCase();
  return this.cities.filter(city => 
    city.toLowerCase().includes(filterValue)
  );
}

4. 验证Angular Material模块导入（针对Angular 17独立组件） #

如果是独立组件，需在组件的imports数组中导入所需模块：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { ReactiveFormsModule } from '@angular/forms';
import { Observable } from 'rxjs';
import { startWith, map } from 'rxjs/operators';

@Component({
  selector: 'app-create-booking',
  standalone: true,
  imports: [
    ReactiveFormsModule,
    MatFormFieldModule,
    MatInputModule,
    MatAutocompleteModule
  ],
  templateUrl: './create-booking-component.html',
})
export class CreateBookingComponent {
  // ... 你的组件代码
}

若使用NgModule架构，需在对应模块的imports数组中添加上述模块。

5. 排查变更检测策略（可选） #

若组件使用ChangeDetectionStrategy.OnPush，确保async管道能正常触发变更检测；必要时可注入ChangeDetectorRef并调用detectChanges()，不过async管道通常会自动处理该场景。

内容的提问来源于stack exchange，提问作者Pierce Angeloff