如何在Angular Material中将tab键设为回车键? [英] How to make tab key as enter key in Angular Material?
问题描述
这是我的角度材料自动完成代码
<div [隐藏]=IsCascading"><mat-autocomplete [id]="collectionType";#auto="matAutocomplete"(optionSelected)='onChange($event)'><mat-option *ngFor="let items of codeList";[值]=items.text";[attr.data-text]='items.text' [id]=items.value">{{items.text}}</mat-option></mat-autocomplete>
Angular 材料在 tab
选择时有问题.例如,在单击 tab
按钮时,材料自动完成无法选择值.但是在单击 enter
按钮时它正在工作.因此,我需要手动覆盖 tab
键事件上的 enter
键事件.怎么可能?
改进我的评论,并根据回复我们可以创建一个指令
import {指示,在视图初始化之后,在销毁,可选的来自'@angular/core';进口 {MatAutocompleteTrigger来自'@angular/material';@指示({选择器:'[制表符指令]'})导出类 TabDirective 实现 AfterViewInit、OnDestroy {可观察的:任何;构造函数(@Optional()私有自动触发器:MatAutocompleteTrigger){}ngAfterViewInit() {this.observable = this.autoTrigger.panelClosingActions.subscribe(x => {如果(this.autoTrigger.activeOption){this.autoTrigger.writeValue(this.autoTrigger.activeOption.value)}})}ngOnDestroy() {this.observable.unsubscribe();}}
您使用:
(参见 stackblitz)
更新我们只能控制tab.key,否则你总是关闭,你得到选定的值,所以
@Directive({选择器:'[制表符指令]'})导出类 TabDirective {可观察的:任何;构造函数(@Optional()私有自动触发器:MatAutocompleteTrigger){}@HostListener('keydown.tab', ['$event.target']) onBlur() {如果(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() 私有控制:NgControl) {}ngAfterViewInit() {this.observable = this.autoTrigger.panelClosingActions.subscribe(x => {如果(this.autoTrigger.activeOption){常量值 = this.autoTrigger.activeOption.value;如果(this.control)this.control.control.setValue(值,{发出:假});this.autoTrigger.writeValue(value);}})}
this is my angular materiel auto complete code
<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 material had a problem with tab
selection.like the materiel auto complete not able to select the value while click the tab
button. but it's working while click the enter
button. So manually I need to overwrite the enter
key event on tab
key event. How could possible?
Improve my comment, and based on the response we can create a directive
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();
}
}
You use:
<input tab-directive type="text" matInput [formControl]="myControl"
[matAutocomplete]="auto" >
(see stackblitz)
Update We can control only tab.key, else always you close, you get the selected value, so
@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)
}
}
}
Update 2 I don't believe this answer has so many upvotes because it's wrong. As @Andrew allen comments, the directive not update the control. Well, It's late, but I try to solve. One Option is use
this.autoTrigger._onChange(this.autoTrigger.activeOption.value)
Anohter idea is inject the ngControl, so
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);
}
})
}
这篇关于如何在Angular Material中将tab键设为回车键?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!