Angular 8中调用patchForm后Mat Autocomplete功能异常求助

我来帮你排查下这个问题——大概率是你设置默认值的方式导致过滤逻辑的订阅失效了，这才让Autocomplete变成了普通下拉列表。咱们一步步来解决：

问题根源分析 #

你的patchForm函数是直接重新赋值了整个profileForm（this.profileForm = this.fb.group(...)），而不是用表单组自带的patchValue方法。这种操作会让你之前对Category、Model控件的valueChanges订阅全部失效——毕竟你创建了一个全新的FormGroup，原来的监听关系自然断了。而Mat Autocomplete的自动补全完全依赖filteredOptions这类Observable的实时更新，订阅断了，过滤逻辑当然不会触发，就只能显示全部选项了。

解决方案 #

方案1：改用FormGroup的patchValue方法（推荐） #

不要重新创建表单组，而是用patchValue直接更新已有表单的字段值，这样原有订阅会保持生效：

patchForm(object){
  this.profileForm.patchValue({
    Category: object[0]['Category'].NameCategory,
    Model: object[0]['Model'].NameModel,
    Prix: object[0]['UnitPurchasePriceTTC'] || 0,
    vente: object[0]['UnitSellingPriceTTC'] || 0,
    Dimension: object[0]['Dimension'] || 0,
    TVA: object[0]['TVAInPercents'] || 0
  });
}

这样设置默认值后，valueChanges会自动触发，过滤逻辑正常工作，Autocomplete也能恢复自动补全功能。

方案2：若必须重建FormGroup，需重新初始化过滤Observable #

如果业务场景要求你必须重新创建FormGroup，那在创建完成后要重新初始化filteredOptions和filteredOptionsModel的订阅，记得用startWith传入默认值，确保初始化时就会执行一次过滤：

patchForm(object){
  this.profileForm = this.fb.group({
    Category: object[0]['Category'].NameCategory,
    Model: object[0]['Model'].NameModel,
    Prix: object[0]['UnitPurchasePriceTTC'] || 0,
    vente: object[0]['UnitSellingPriceTTC'] || 0,
    Dimension: object[0]['Dimension'] || 0,
    TVA: object[0]['TVAInPercents'] || 0
  });

  // 重新初始化过滤逻辑
  this.initAutocompleteFilters();
}

private initAutocompleteFilters() {
  // 处理Category的过滤
  const categoryControl = this.profileForm.get('Category');
  this.filteredOptions = categoryControl.valueChanges.pipe(
    startWith(categoryControl.value), // 用默认值启动过滤
    map(value => this.filterCategories(value))
  );

  // 处理Model的过滤
  const modelControl = this.profileForm.get('Model');
  this.filteredOptionsModel = modelControl.valueChanges.pipe(
    startWith(modelControl.value),
    map(value => this.filterModels(value))
  );
}

// 示例过滤函数，替换成你自己的逻辑
private filterCategories(value: string): string[] {
  const filterVal = value.toLowerCase();
  return this.allCategories.filter(cat => cat.toLowerCase().includes(filterVal));
}

private filterModels(value: string): string[] {
  const filterVal = value.toLowerCase();
  return this.allModels.filter(model => model.toLowerCase().includes(filterVal));
}

验证小技巧 #

你可以在控制台加个日志，确认valueChanges是否正常触发：

this.profileForm.get('Category').valueChanges.subscribe(val => {
  console.log('Category值变化了:', val);
});

如果设置默认值或输入时没有日志输出，说明订阅确实失效了，就用上面的方案修复即可。

内容的提问来源于stack exchange，提问作者stacj aa