Сбросить автозаполнение ввода после выбора, затем показать все опции

Question

У меня есть автозаполнение ввода, проблема в том, что всякий раз, когда я сбрасываю значение ввода, он не сбрасывает параметры выбора. Он показывает только последний выбор.

Вот GIF-файл, чтобы проиллюстрировать проблему: https://recordit.co/aVXqlPYHFQ

Я пытался с this.form.get('panelForm').setValue(''); сбросить ввод, но не сбросить параметры

Вот мой код

<form *ngIf="options.length">
  <mat-form-field [formGroup]="form">
    <input type="text" [placeholder]="'Panel'" aria-label="Panel" matInput [formControl]="myControl" [formControlName]="'panelForm'" [matAutocomplete]="auto">
    <button mat-button mat-icon-button matSuffix (click)="clear()" *ngIf="form.get('panelForm')">
      <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>

  myControl = new FormControl();
  filteredOptions: Observable<Panel[]>;
  public form: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.filteredOptions = this.myControl.valueChanges.pipe(
      startWith(''),
      map(value => { return this._filter(value)})
    );

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

  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('');
  }

Answer 1

Вам не нужно использовать элемент управления Form, если вы используете имя элемента управления Form (внутри FormGroup).

Я рекомендую использовать FormControl и установить:

ngOnInit() {
  this.myControl = new FormControl({'', disabled: this.options.length < 1});
  this.filteredOptions = this.myControl.valueChanges.pipe(
    startWith(''),
    map(value => { return this._filter(value)})
  );
}

clear() {
  this.myControl.patchValue('');
}

Должно работать

Answer 2

Попробуйте сбросить значение непосредственно в html:

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