从自动完成下拉列表中未选择任何选项时如何清除 mat- 自动完成

Posted 2023-03-05

【中文标题】从自动完成下拉列表中未选择任何选项时如何清除 mat- 自动完成

【英文标题】：How to clear mat- autocomplete when no option is selected from autocomplete dropdown

【发布时间】：2020-03-31 04:57:40

【问题描述】：

我已经成功实现了 mat-autocomplete，如果从自动完成下拉菜单中选择它就可以正常工作。当我输入一些文本并导航到其他字段而不选择下面的自动完成字段时，我遇到了问题。它保留在自动完成字段中键入的值。

我已使用以下方法来解决此问题 -

MatAutocompleteTrigger - 下面是我在 ts 文件中使用的代码 -

  @ViewChild('autoCompleteInput',  static: false,read: MatAutocompleteTrigger )  trigger: MatAutocompleteTrigger;
.
.
.
this.trigger.panelClosingActions
  .subscribe(e => 
   if (!(e && e.source)) 
   this.accountForm.get('accountId').setValue="";
   this.account.accountId = null;
   
)

首先，我无法将它保存在任何角度的生命周期钩子中。此触发器在角度生命周期挂钩期间不会被初始化，但稍后它会从 mat-autocomplete 接收任何值。因此，只要我在字段中输入文本，它就会清除值（保留下面的自动完成列表；看起来不太好）

2.在 filterOptions 上使用 observalble（在我的自动完成字段上可观察） - 我已经使用了下面的代码 -

 this.filteredOptions = this.accountForm.get('accountId').valueChanges.pipe(
  debounceTime(250),
  distinctUntilChanged(),
  filter(searchString => typeof searchString === 'string'),
  filter(searchString => searchString.length > 0),
  switchMap(searchString => 
    return this.accountService.autoCompleteBrokerSearch(searchString);
  )
);
this.filteredOptions.takeUntil(this.ngUnsubscribe).subscribe((lookups: accountEntityModel[]) => 
  if (lookups.length === 0) 
    this.account.accountId = null;
    this.accountForm.get('accountId').patchValue('');
  
  if(lookups.find(value => value.id !== this.account.id))
    this.account.accountId = null;
    this.accountForm.get('accountId').patchValue('');
  
);

带有模板代码 -

<mat-form-field  appearance="standard" >
<mat-label> 'account.enterAccount' | translate </mat-label>
<input
 matInput
 formControlName="accountId"
 class="search-select"
 [matAutocomplete] = "accountAutocomplete"
#autoCompleteInput="matAutocompleteTrigger">
<mat-autocomplete #accountAutocomplete = "matAutocomplete" [displayWith]="displayFn.bind(this)" >

    <mat-option [value]="accountOption" *ngFor="let accountOption of filteredOptions | async" (onSelectionChange)="onEnteredAccount(accountOption)" >
        accountOption.description
      </mat-option>

</mat-autocomplete>

</mat-form-field>

如果我们没有从自动完成中选择任何内容，我只需要清除该字段，它也应该从表单中清除字段值。

【参考方案1】：

您可以从输入中删除 formControl-binding，当您选择一个选项时，您可以将该 id 设置为您的表单。

您已经在调用这样的函数(onSelectionChange)="onEnteredAccount(accountOption)"，您可以在其中执行此操作。

【讨论】：

是的，但是当我选择任何 mat-autocomplete 选项时它会被触发。当用户没有从自动完成下拉菜单中选择任何选项时，我希望从表单中删除该字段及其相关 id。

【参考方案2】：

它对我来说很好用..

html：

     <mat-form-field appearance="outline">
          <input type="text" placeholder="start type.." #autoCompleteInput="matAutocompleteTrigger"
              matInput [matAutocomplete]="catAuto" [formControl]="selectedData" (keyup)="onChange($event)">
          <mat-autocomplete #catAuto="matAutocomplete" [displayWith]="displayFnForAutoComplete"
              (optionSelected)="onSelect($event.option.value)">
              <mat-option *ngFor="let option of filterList" [title]="option" [value]="option.id">
                  option.name
              </mat-option>
          </mat-autocomplete>                  
     </mat-form-field>

TS：

@ViewChild('autoCompleteInput',  static: false, read: MatAutocompleteTrigger ) trigger: MatAutocompleteTrigger;
selectedData = new FormControl();

 ngAfterViewInit() 
    this.trigger.panelClosingActions
      .subscribe(e => 
        this.selectedData.setValue(null);
      );