web-dev-qa-db-ja.com

Angular Material：ユーザーがEnterキーを押したときにオートコンプリートパネルを非表示にする

私は現在、ユーザーがEnterキーを押して編集可能な要素をタブで移動できるテーブルで作業しています。私もAngularこの資料を使用します。

Mat-autocomplete要素を使用して動的に作成されたいくつかの入力フィールドを持つmat-form-fieldがあります。ただし、Enterキーイベントはこれとは少し異なります。

入力フィールドを押すと、パネルが開き（ドロップダウン）、そこでユーザーが入力を選択するか、単に自分で書くことができ、パネルが提案（オートコンプリート）を提供します。

タブキーを押すとどうなりますか？

入力中にタブを押すと、カーソルが次の編集可能な要素に移動し、最新の要素のパネル（ドロップダウン）が閉じます。

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イベントもあり、フォーカスが入力フィールドにあるときにユーザーが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);
}

}

この関数は2つのパラメーターを受け取ります。行インデックスと列インデックス。次に焦点を当てる次の編集可能な要素のインデックスを計算します。

this.autocomplete.showPanel = falseという行は、このようにパネルを単に閉じることができるかどうかを確認するために作成されましたが、機能しませんでした。

this.autocompleteはクラスMatAutocompleteのオブジェクトです。私はこれを書いて追加しました

@Input('matAutocomplete')
autocomplete: MatAutocomplete

必要なもの：

Enterキーを押した後、マットのオートコンプリート要素のドロップダウンパネルを閉じます。

前もって感謝します！

更新：

少し働いた後、私はこれを見つけました

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

+

this.test.closePanel();

今回はテーブルの最初のセルのパネルを閉じることができますが、他の入力フィールドのすべてのパネルは開いたままになります

javascriptangulartypescriptfrontendangular-material2
10
Ekos

私の使用例はわずかに異なるため、更新は機能しませんでしたが、-わずかに異なる解決策が見つかりました：

@ViewChild(MatAutocompleteTrigger) autocomplete: MatAutocompleteTrigger;

次に、これを使用してドロップダウンオプションを閉じることができます。

this.autocomplete.closePanel();

ViewChildも必ずインポートしてください。

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

魅力のように機能します。

22
William Hampshire

この comment は、入力要素でmatAutocompleteTriggerへの参照を直接取得できるソリューションを提供します。テンプレート内のclosePanel（）。例えば：

    <input
      type="text"
      matInput
      #trigger="matAutocompleteTrigger"
      (keydown.enter)="$event.target.blur(); trigger.closePanel()"
      [formControl]="myControl"
      [matAutocomplete]="auto"
    />
8
Tim
// 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);
    }
0
andres robanesky