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

Angular5 - How to detect empty or deleted field in mat-autocomplete?(角度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中的空白或删除字段?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

Update another component when Formik form changes(当Formik表单更改时更新另一个组件)
Formik validation isSubmitting / isValidating not getting set to true(Formik验证正在提交/isValiating未设置为True)
React Validation Max Range Using Formik(使用Formik的Reaction验证最大范围)
Validation using Yup to check string or number length(使用YUP检查字符串或数字长度的验证)
Updating initialValues prop on Formik Form does not update input value(更新Formik表单上的初始值属性不会更新输入值)
password validation with yup and formik(使用YUP和Formick进行密码验证)