Question

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

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

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>

仅当我们未从自动完成中选择任何内容时，才需要清除该字段，并且它也应该从表单中清除字段值。

Answer 1

您可以从输入中删除formControl绑定，并在选择选项时将其ID设置为表单。

您已经在调用这样的函数(onSelectionChange)="onEnteredAccount(accountOption)"。

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

1 个答案: