本文介绍了角度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中的空白或删除字段?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!