html - 如何在 Angular Material 中将制表键作为输入键?
问题描述
这是我的角材料自动完成代码
<input type="search" id="setId" name="setId" [attr.list]='collectionType' [(ngModel)]="selValue" class="text-box"
placeholder="--Select--" (focus)="ValidateParent()" (keyup.tab)="test()" (keyup)="EmitValues($event)" [id]="setId"
[matAutocomplete]="auto" [title]="selValue" [placeholder]='WaterMarkText'>
<div [hidden]="IsCascading">
<mat-autocomplete [id]="collectionType" #auto="matAutocomplete" (optionSelected)='onChange($event)'>
<mat-option *ngFor="let items of codeList" [value]="items.text" [attr.data-text]='items.text' [id]="items.value">
{{items.text}}
</mat-option>
</mat-autocomplete>
</div>
Angular 材质的选择有问题。比如材质自动完成在单击按钮tab
时无法选择值。tab
但它在单击enter
按钮时起作用。所以手动我需要在enter
关键事件上覆盖tab
关键事件。怎么可能?
解决方案
改进我的评论,并根据回复我们可以创建一个指令
import {
Directive,
AfterViewInit,
OnDestroy,
Optional
} from '@angular/core';
import {
MatAutocompleteTrigger
} from '@angular/material';
@Directive({
selector: '[tab-directive]'
})
export class TabDirective implements AfterViewInit, OnDestroy {
observable: any;
constructor(@Optional() private autoTrigger: MatAutocompleteTrigger) {}
ngAfterViewInit() {
this.observable = this.autoTrigger.panelClosingActions.subscribe(x => {
if (this.autoTrigger.activeOption) {
this.autoTrigger.writeValue(this.autoTrigger.activeOption.value)
}
})
}
ngOnDestroy() {
this.observable.unsubscribe();
}
}
你用:
<input tab-directive type="text" matInput [formControl]="myControl"
[matAutocomplete]="auto" >
(见stackblitz)
更新 我们只能控制tab.key,否则你总是关闭,你得到选择的值,所以
@Directive({
selector: '[tab-directive]'
})
export class TabDirective {
observable: any;
constructor(@Optional() private autoTrigger: MatAutocompleteTrigger) {}
@HostListener('keydown.tab', ['$event.target']) onBlur() {
if (this.autoTrigger.activeOption) {
this.autoTrigger.writeValue(this.autoTrigger.activeOption.value)
}
}
}
更新 2我不相信这个答案有这么多赞成,因为它是错误的。正如@Andrew allen 评论的那样,该指令不会更新控件。好吧,已经晚了,但我试图解决。一种选择是使用
this.autoTrigger._onChange(this.autoTrigger.activeOption.value)
另一个想法是注入 ngControl,所以
constructor(@Optional() private autoTrigger: MatAutocompleteTrigger,
@Optional() private control: NgControl) {}
ngAfterViewInit() {
this.observable = this.autoTrigger.panelClosingActions.subscribe(x => {
if (this.autoTrigger.activeOption) {
const value = this.autoTrigger.activeOption.value;
if (this.control)
this.control.control.setValue(value, {
emit: false
});
this.autoTrigger.writeValue(value);
}
})
}
推荐阅读
- php - 是否可以将具有匿名函数的数组分配给 PHP 中的类属性?
- javascript - 使用 javascript 或 php 更改 var img_list 值
- javascript - 如何将 .on ('ready') 替换为命名空间,以便在维护命名空间的同时准备好 ()?
- javascript - scrollToIndex 上的平面列表问题
- angular - 从 url 在页面之间传递数据
- vmware-clarity - 将最后一个数据网格行推到网格底部
- angularjs - 如何在指令中制作我自己的 ng-change 和 ng-model?
- sql - SQL 查询模式选择
- jquery - 如何在 Vue.js 中导入 owl carousel
- arrays - 将类型从字符串转换为字符串数组