角度素材:当用户点击输入键

时间:2018-01-23 09:03:01

标签: javascript angular typescript frontend angular-material2

我目前正在制作一个表,用户可以通过按Enter键来浏览可编辑元素。我也在这里使用Angular Material。

我有一个mat-form-field,带有几个动态创建的输入字段和mat-autocomplete元素。但是我的回车键事件在这方面有点不同。

当您按下输入字段时,将打开一个面板(下拉列表),用户可以在其中选择输入,或者他可以自行编写,面板将提供建议(自动完成)。

如果按Tab键会怎样?

如果在键入时按Tab键,光标将移动到下一个可编辑元素,并且最新元素的面板(下拉列表)将关闭。

按Enter键会出现什么情况

如果在键入时按Enter键,光标将移动到下一个可编辑元素但是最新元素的面板(下拉列表)保持打开状态,这导致多个输入字段具有打开的下拉面板,即使用户已经写过他需要什么。

模板:

<tr *ngFor="let row of rows; let rowIdx = index">
            <td *ngFor="let col of columns; let colIdx = index">
                <mat-form-field class="example-full-width">             
                <input  #inputs type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto"
                    (keyup.enter)="shiftFocusEnter(rowIdx, colIdx)">
                    <mat-autocomplete #auto="matAutocomplete">
                            <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
                            {{ option }}
                            </mat-option>
                        </mat-autocomplete>
                    </mat-form-field>
            </td>
      </tr>

这只是根据数组中的对象数创建行(这里不太重要)。

输入字段上还有一个keyup.enter事件,当用户按下输入时会触发,同时焦点位于输入字段上,并传递行索引和列索引以获取下一个可编辑元素。

组件:

shiftFocusEnter(rowIdx: number, colIdx: number) {
console.log("Enter", rowIdx, colIdx);  
if(colIdx == 4 && rowIdx == 5) {
  console.log("Reached end of row");
}
else {
  colIdx = colIdx + this.columns.findIndex(c => c.editable);
  this.autocomplete.showPanel = false;
  this.focusInput(rowIdx, colIdx);
}

}

此功能接收两个参数。行索引和列索引,并计算要关注的下一个可编辑元素的索引。

编写了 this.autocomplete.showPanel = false 这一行,看看我是否可以像这样关闭面板,但它没有用。

this.autocomplete MatAutocomplete 类的对象。我已经通过写

添加了这个
@Input('matAutocomplete')
autocomplete: MatAutocomplete

我需要什么:

我希望在按下回车键后关闭mat自动完成元素的下拉面板。

提前致谢!

更新

所以在工作了一下之后我发现了这个

@ViewChild('test', { read: MatAutocompleteTrigger }) test: MatAutocompleteTrigger;

+

this.test.closePanel();

这次我可以关闭表格中FIRST单元格的面板,但是其他输入字段的所有面板都将保持打开状态

3 个答案:

答案 0 :(得分:14)

我的用例略有不同,所以您的更新对我不起作用,但我找到了一个略微不同的解决方案,可以解决这个问题:

@ViewChild(MatAutocompleteTrigger) autocomplete: MatAutocompleteTrigger;

然后您可以使用它来关闭下拉选项:

this.autocomplete.closePanel(); 

确保还导入ViewChild:

import { ViewChild } from '@angular/core';

像魅力一样。

答案 1 :(得分:5)

comment提供了一个解决方案,您可以直接在输入元素上获得对 matAutocompleteTrigger 的引用,以便可以在模板中调用closePanel()。例如:

    <input
      type="text"
      matInput
      #trigger="matAutocompleteTrigger"
      (keydown.enter)="$event.target.blur(); trigger.closePanel()"
      [formControl]="myControl"
      [matAutocomplete]="auto"
    />

答案 2 :(得分:0)

// This is my solution  ios/android panel not hide on done button virtual // 


<input type="text" placeholder="{{lbl.TipDoc}}"
class="form-control ui-inputtext ui-widget autocomp"
 #trigautoTipDoc ="matAutocompleteTrigger"
 aria-label="name" matInput                                        (blur)="OcuPanelAuto(trigautoTipDoc);"
formControlName="tipDocLbl" [matAutocomplete]="autoTipDoc" >
<mat-autocomplete #autoTipDoc="matAutocomplete" role="combobox">
<mat-option  *ngFor="let option of tipDocFiltObs | async"
                                                            [value]="option.name">
 {{option.name}}
</mat-option>
</mat-autocomplete>


OcuPanelAuto(cc: MatAutocompleteTrigger) {
        setTimeout(function a() {
            cc.closePanel();
        }, 130);
    }