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

您可以做的是为mat-autocomplete创建一个FormControl

myControl = new FormControl();

然后将其关联到HTML中的mat-autocomplete

<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);

如何检测用户清除选择垫自动完成功能的时间？

1 个答案: