Angular Mat-Autocomplete重置输入后无法恢复全部选项问题求助

我看你遇到的问题很典型——重置输入框后，自动完成的选项没有回到全部列表，只保留了最近选中的那个。这主要是因为你同时绑定了formControl和formControlName，而且重置逻辑只更新了表单组里的控件，没同步到用于过滤的myControl，导致过滤数据流没触发更新。

下面是具体的修复步骤和代码：

问题根源 #

你在输入框上同时用了[formControl]="myControl"和[formControlName]="'panelForm'"，这相当于给输入框绑定了两个独立的FormControl实例。当你调用this.form.get('panelForm').setValue('')时，只是更新了表单组里的控件值，但myControl的value还是停留在之前选中的选项上，所以filteredOptions依然基于旧值过滤，自然只显示那个选项。

修复方案 #

1. 移除重复的控件绑定 #

只保留formControlName，因为我们已经通过表单组创建了panelForm控件，不需要单独的myControl。

2. 调整过滤逻辑的数据源 #

把filteredOptions的监听对象改成表单组里的panelForm控件，这样输入框的值变化会直接触发过滤。

3. 优化重置方法 #

确保重置时能正确触发值变化，让过滤逻辑重新执行，恢复所有选项。

修改后的完整代码 #

模板部分

<form *ngIf="options.length">
  <mat-form-field [formGroup]="form">
    <input 
      type="text" 
      placeholder="Panel" 
      aria-label="Panel" 
      matInput 
      formControlName="panelForm" 
      [matAutocomplete]="auto"
    >
    <button 
      mat-button 
      mat-icon-button 
      matSuffix 
      (click)="clear()" 
      *ngIf="form.get('panelForm')?.value"
    >
      <mat-icon>close</mat-icon>
    </button>
    <mat-autocomplete 
      autoActiveFirstOption 
      #auto="matAutocomplete" 
      (optionSelected)='selectPanel($event.option.value)'
    >
      <mat-option 
        *ngFor="let option of filteredOptions | async" 
        [value]="option.name"
      >
        {{option.name}} ({{option.genesCount}})
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

组件类部分

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { startWith, map } from 'rxjs/operators';

interface Panel {
  name: string;
  genesCount: number;
}

@Component({
  selector: 'app-your-component', // 替换成你的组件选择器
  templateUrl: './your-component.component.html', // 替换成你的模板路径
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  filteredOptions: Observable<Panel[]>;
  public form: FormGroup;
  options: Panel[] = []; // 假设这是你的选项数据源

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      panelForm: new FormControl({ 
        value: '', 
        disabled: this.options.length < 1
      })
    });

    // 监听表单控件的值变化来过滤选项
    this.filteredOptions = this.form.get('panelForm').valueChanges.pipe(
      startWith(''),
      map(value => this._filter(value))
    );
  }

  private _filter(value: string): Panel[] {
    const filterValue = value.toLowerCase();
    return this.options.filter(option => 
      option.name && option.name.toLowerCase().includes(filterValue)
    );
  }

  clear(){
    // 重置表单控件的值，触发过滤逻辑
    this.form.get('panelForm').setValue('');
    // 如果需要强制触发一次值变化（比如重置后没自动更新），可以加上下面这句
    // this.form.get('panelForm').updateValueAndValidity();
  }

  selectPanel(value: string) {
    // 你的选中逻辑
  }
}

额外说明 #

• 我还调整了清除按钮的显示条件，只有当输入框有值时才显示，更合理。
• 如果重置后依然没触发更新，可以尝试调用updateValueAndValidity()强制刷新控件状态。

这样修改后，重置输入框时，表单控件的值会被清空，触发valueChanges，过滤逻辑会基于空字符串重新过滤，自然就会显示所有选项了。

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