角度5-怎么检测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检测仅选定内容更改,但它无法检测字段最初是否为空,或者在选择项目然后将其删除后,我没有选择任何内容并将焦点移出输入字段。

怎么检测?

我尝试了onkeypressng-changeng-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中的空白或删除字段?的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。

0
没有账号?注册  忘记密码?