Angular5 - How to detect empty or deleted field in mat-autocomplete?

Question

This is my html which contains the material autocomplete.

<ng-container *ngSwitchCase="'autocomplete'">
    <div [ngClass]="(filter.cssClass || 'col-md-4') + ' mt-2 pt-1'">
        <div class="filter-key-label">
            {{filter.columnTitle}}
        </div>
        <div class="filter-form-control d-flex flex-wrap justify-content-left">
        <mat-form-field class="full-width">
            <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto" ng-model="blah">
            <mat-autocomplete #auto="matAutocomplete">
                <mat-option *ngFor="let option of getOptionsTypeAhead(filter.key) | async" [value]="option" (onSelectionChange)="typeaheadChange($event, filter.key)">
                {{ option }}
                </mat-option>
            </mat-autocomplete>
            </mat-form-field>
        </div>
    </div>
</ng-container>

Currently I am able to detect only selection changes using onSelectionChange but it so not detects if the field is empty initially or when after having selected an item and then deleting it, I do not select anything and shift focus out of the input field.

How do I detect that?

I tried onkeypress , ng-change coupled with ng-model (was not very sure how to use that) and change but nothing worked. Is there some provision already present by the library or do we detect the change and input field value?

Answer 1

Solved it! It was change all the time.

The best part is that it doesn't behave like onkeypress and only fires when there is an blur event.

I changed my <input> like this:

<input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto" (change)="handleEmptyInput($event, filter.key)">

The controller looks something like this:

handleEmptyInput(event: any, key: string){
  if(event.target.value === '') {
    delete this.filtersApplied[key];
  }
}

Just like how I wanted to capture instances of empty fields or blank values :)

Answer 2

I still prefer (input)-event, because of the instant reaction. But in my case I needed a programmatic solution, because I needed to pass the autocomplete-object (MatAutocomplete) to an uncoupled component (for more flexibility). This worked for me pretty good that way:

 @Input() matAutocomplete: MatAutocomplete = null; constructor() { } ngOnInit(): void { if (this.matAutocomplete) { this.matAutocomplete.optionSelected.subscribe((evt: MatAutocompleteSelectedEvent) => { const val = evt.option.value; // here you can do whatever you like with this value. // probably trigger the event, that is binded via (change) or (input) with the input-field }); } }