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

admin管理员组

文章数量:1254278

This is my html which contains the material autoplete.

<ng-container *ngSwitchCase="'autoplete'">
    <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" [matAutoplete]="auto" ng-model="blah">
            <mat-autoplete #auto="matAutoplete">
                <mat-option *ngFor="let option of getOptionsTypeAhead(filter.key) | async" [value]="option" (onSelectionChange)="typeaheadChange($event, filter.key)">
                {{ option }}
                </mat-option>
            </mat-autoplete>
            </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?

This is my html which contains the material autoplete.

<ng-container *ngSwitchCase="'autoplete'">
    <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" [matAutoplete]="auto" ng-model="blah">
            <mat-autoplete #auto="matAutoplete">
                <mat-option *ngFor="let option of getOptionsTypeAhead(filter.key) | async" [value]="option" (onSelectionChange)="typeaheadChange($event, filter.key)">
                {{ option }}
                </mat-option>
            </mat-autoplete>
            </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?

• javascript
• angular-material
• angular5
• mat-autoplete

Share Improve this question Follow edited Apr 19, 2018 at 20:14 msanford 12.2k1313 gold badges7171 silver badges9898 bronze badges asked Apr 19, 2018 at 20:10 Aakash VermaAakash Verma 3,99477 gold badges3535 silver badges7575 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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" [matAutoplete]="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 :)

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 autoplete-object (MatAutoplete) to an uncoupled ponent (for more flexibility). This worked for me pretty good that way:

@Input() matAutoplete: MatAutoplete = null;

constructor() { }

ngOnInit(): void {
  if (this.matAutoplete) {
this.matAutoplete.optionSelected.subscribe((evt: MatAutopleteSelectedEvent) => {
  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
});
  }
}

本文标签： javascriptAngular5How to detect empty or deleted field in matautocompleteStack Overflow