10

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?

msanford
  • 11,803
  • 11
  • 66
  • 93
Aakash Verma
  • 3,705
  • 5
  • 29
  • 66

2 Answers2

12

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

Aakash Verma
  • 3,705
  • 5
  • 29
  • 66
  • I tried follow this example, but when I enter with value in mat-autocomplete the input not working. If I select one item (without using autocomplete, it's working). – Joh Feb 05 '19 at 12:15
  • It's not made to detect key presses, it only works when you enter or delete some value and shift the focus out of the field. – Aakash Verma Feb 06 '19 at 04:45
0

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
});
  }
}
Robert Fornesdale
  • 80
  • 1
  • 5