it-roy-ru.com

Angular Материал: скрыть панель автозаполнения, когда пользователь нажимает клавишу Enter.

В настоящее время я работаю над таблицей, где пользователь может перемещаться по редактируемым элементам, нажимая Enter Я также использую Angular Материал в этом.

У меня есть поле mat-form-field с несколькими динамически создаваемыми полями ввода с элементом mat-autocomplete. Однако мое событие ввода ключа действует немного иначе.

Когда вы нажмете на поле ввода, откроется панель (выпадающий список), где пользователь может выбрать вход или он может просто написать сам, и панель даст предложения (автозаполнение).

Что произойдет, если вы нажмете клавишу табуляции?

Если вы нажмете клавишу Tab во время набора текста, курсор переместится на следующий редактируемый элемент, и панель (раскрывающийся список) последнего элемента закроется.

что произойдет, если вы нажмете клавишу ввода

Если вы нажмете 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

Что мне нужно:

Я хочу, чтобы раскрывающаяся панель элемента автозаполнения мата закрывалась после нажатия клавиши ввода.

Заранее спасибо!

Обновление:

Поэтому, поработав немного, я нашел это

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

+

this.test.closePanel();

На этот раз я могу закрыть панель ПЕРВОЙ ячейки в таблице, однако все панели других полей ввода останутся открытыми.

4
Ekos

Мой вариант использования был немного другим, так что ваше обновление не сработало для меня, но я нашел немного другое решение, которое помогает:

@ViewChild(MatAutocompleteTrigger) autocomplete: MatAutocompleteTrigger;

Затем вы можете использовать это, чтобы закрыть параметры выпадающего списка:

this.autocomplete.closePanel(); 

Не забудьте также импортировать ViewChild:

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

Работает как шарм.

10
William Hampshire

Этот комментарий предоставляет решение, в котором вы можете получить ссылку на matAutocompleteTrigger непосредственно на элементе ввода, чтобы вы могли вызывать closePanel () в шаблоне. Например:

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