Как определить, когда пользователь очищает выбор мат-автозаполнения?

Question

На основании значения выбора автозаполнения мне нужно обновить некоторые другие поля формы.

Итак, я добавил optionSelected обработчик события:

<mat-autocomplete (optionSelected)="onOptionSelected($event)">
    <mat-option *ngFor="let item of items"
                [value]="item">
        <span>{{item}}</span>
    </mat-option>
</mat-autocomplete>

Пользователь должен иметь возможность отмените выбор, в этом случае мне нужно сбросить и другие поля.

Проблема в том, что optionSelected не запускается, когда пользователь очищает mat-autocomplete.

Как поймать событие autocomplete was cleared?

Answer 1

Что вы можете сделать, это создать FormControl для вашего автозаполнения по мату

myControl = new FormControl();

, а затем связать его с вашим автозаполнением по мату в HTML

<mat-autocomplete [formControl]="myControl" (optionSelected)="onOptionSelected($event)">
    <mat-option *ngFor="let item of items"
                [value]="item">
        <span>{{item}}</span>
    </mat-option>
</mat-autocomplete>

И, наконец, внутри вашего компонента слушайте изменения значений и запрашивайте новые данные, которые затем вы будете устанавливать в качестве параметров

this.myControl.valueChanges
  .pipe(
    debounceTime(500),
    distinctUntilChanged(),
    takeUntil(this.ngUnsubscribe) // optional but recommended 
  )
  .subscribe(searchPhrase => check if empty);