How to clear mat- autocomplete when no option is selected from autocomplete dropdown

Question

I have successfully implemented mat-autocomplete and it is working fine if selected from auto complete drop down. I am facing issues when i have typed in some text and navigate to other fields without selecting below dropped in auto complete fields. It retains the value typed in autocomplete field.

I have used below approach to fix this issue -

MatAutocompleteTrigger - Below code I have used in ts file -

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

First of all , i am unable to keep it in any angular life cycle hook. This trigger doesn't get initialized during angular lifecycle hooks, but later while it receives any values form mat-autocomplete.So it clears value as soon I type in text in field(keeping the below autocomplete list; which doesn't look good)

2.Used observalble on filterOptions(Obserable on my autocomplete field) - I have used below code for i t -

 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('');
  }
});

with Template code -

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

I only require to clear the field if we have not selected anything from auto complete, and it should clear field values from form too.

JuNe JuNe · Accepted Answer · 2019-12-06T10:32:06

You can remove the formControl-binding from your input and when you select an option you set that id to your form.

You are already calling such a function (onSelectionChange)="onEnteredAccount(accountOption)" in which you can do that.

How to clear mat- autocomplete when no option is selected from autocomplete dropdown

1 Answers