Автозаполнение не отображается после setValue

Question

Я создаю форму, в которой использую модуль Angular Material Autocomplete . Я загружаю опции с сервера и фильтрую их с помощью ввода. Это прекрасно работает, и теперь я хотел добавить значок «очистить», чтобы очистить поле, если это необходимо.

Параметр clear очищает поле, но не отображает параметры автозаполнения снова. Он показывает их, когда я вручную удаляю входное содержимое с помощью backspace, но не со значком.

Для «очистки» поля я использую этот код:

clear(control: string): void {
    this.form.get(control).setValue('');
}

И я называю это из mat-icon компонента:

<mat-form-field>
    <input matInput type="text" ... >
    <mat-icon matSuffix (click)="clear(fieldName)" ...>
        clear</mat-icon>
</mat-form-field>
<mat-autocomplete> ... </mat-autocomplete>

Где fieldName (строка) - это имя элемента управления, который я хочу очистить.

И вот как я фильтрую опции автозаполнения:

this.filter = this.form.get(field).valueChanges.pipe(
    startWith(''), // Don't even know what this does...
    map(value => this.options.filter(option => option.name.toLowerCase().includes(value.toString().toLowerCase())))
);

Я подозреваю, что, возможно, есть ошибка с setValue('') в методе clear(). Или, может быть, это метод фильтра, который я использую.

Вот полный пример в StackBlitz:

https://stackblitz.com/edit/angular-autocomplete-clear9zzmw2

Answer 1

Похоже, вы хотите открыть панель параметров, как только вы нажмете кнопку очистки. Этого не происходит, потому что после выбора параметра matAutocomplete он выбирает значение и закрывает панель параметров. Чтобы открыть его снова, вам нужно либо удалить символ из текстового поля , либо ввести последовательность символов, соответствующую .

Здесь вы вручную очищаете значение, но оно не ограничивается matAutoComplete, чтобы открыть панель. Если вы посмотрите на исходный код matAutocomplete, вы обнаружите, что событие input / blur / keydown произошло за открытие и закрытие панели. Вы можете сделать это, вызвав это событие вручную (в отдельный цикл обнаружения изменений). Но самым удобным способом было бы вызвать openPanel метод matAutocomplete.

Итак, давайте сконцентрируемся на том, как мы можем вызвать openPanel метод matAutocomplete. Поскольку вы использовали matAutocomplete с комбинацией matInput, она экспортируется как matAutocompleteTrigger. Поэтому добавьте #automcomplete="matAutocompleteTrigger" внутри элемента matInput, как показано ниже.

Разметка

<input
  matInput
  type="text"
  #automcomplete="matAutocompleteTrigger"
  placeholder="Select something"
  formControlName="autocomplete"
  [matAutocomplete]="autocompleteStuff"
  required>

Теперь, используя ViewChild декоратор, мы можем запросить autocomplete переменную шаблона

Компонент

// It will have an autocomplete component instance
@ViewChild('automcomplete') autocomplete;
//...
//...
clear(control: string): void {
    this.form.get(control).setValue('');
    // call autoComplete `openPanel` to show up options
    setTimeout(()=> {this.autocomplete.openPanel() })
}

Демонстрация работы

---

Альтернативное решение может быть размыто и сфокусировано на вводе программно. Для этого просто оставьте #automcomplete на matInput, а затем запросите элемент с помощью ViewChild, а затем вызовите событие для nativeElement запрашиваемого результата.

Html

<input
  matInput
  type="text"
  #automcomplete
  placeholder="Select something"
  formControlName="autocomplete"
  [matAutocomplete]="autocompleteStuff"
  required>

Компонент

@ViewChild('automcomplete') autocomplete;
//...
//...
clear(control: string): void {
    this.form.get(control).setValue('');
    setTimeout(()=> {
      this.autocomplete.nativeElement.blur();
      this.autocomplete.nativeElement.focus();
    })
}

Разветвленная демоверсия