角度5-如何检测MAT-AutoComplete中的空白或删除字段？

Angular5 - How to detect empty or deleted field in mat-autocomplete?(角度5-如何检测MAT-AutoComplete中的空白或删除字段？)

问题描述

这是我的html，其中包含自动完成材料。

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

目前，我可以使用onSelectionChange检测仅选定内容更改，但它无法检测字段最初是否为空，或者在选择项目然后将其删除后，我没有选择任何内容并将焦点移出输入字段。

如何检测？

我尝试了onkeypress、ng-change和ng-model(不太确定如何使用)和change，但都不起作用。库中是否已存在某些设置，或者我们是否检测到更改和输入字段值？

推荐答案

已解决！一直都是change。

最好的部分是它的行为与onkeypress不同，并且只有在有blur事件时才会触发。

我将<input>更改为：

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

控制器如下所示：

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

就像我希望捕获空字段或空白值的实例一样：)

这篇关于角度5-如何检测MAT-AutoComplete中的空白或删除字段？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！