открыть раскрывающийся список NgbTypeahead при нажатии кнопки на кнопку - PullRequest
Новая
       21

открыть раскрывающийся список NgbTypeahead при нажатии кнопки на кнопку

0 голосов
/ 26 октября 2018

Мне нужно смоделировать событие фокуса на входе, чтобы открыть раскрывающийся список NgbTypeahead, это возможно?Потому что я не могу сделать это так:

.ts: 

@ViewChild('inputExecutor') inputExecutor: ElementRef
focus$ = new Subject<string>();
click$ = new Subject<string>();

focused(){
    this.executorForm.controls['executor'].setValue('');
    this.focus$.next(this.executorForm.value.executor);
}

inputFocus(){
    this.inputExecutor.nativeElement.focus();
}


html:

     <input
             class="choose-executor-input"
             type="text"
             name="executor"
             formControlName="executor"
             [ngbTypeahead]="searchExecutors"
             (focus)="focus$.next($event.target.value); focused()"
             (click)="click$.next($event.target.value);"
             (selectItem)="itemSelected($event)"
             [resultFormatter]="formatExecutors"
             [inputFormatter]="formatExecutors"
             #instance="ngbTypeahead"
             #inputExecutor/>
     <button 
            click)="inputFocus()"
            class="btn btn-executor-open"></button>
    </button>

Так как же я могу сосредоточиться на вводе, чтобы открыть раскрывающийся список?Есть вопросы?

1 Ответ

0 голосов
/ 30 октября 2018

Для этого вы можете инициировать событие ввода для элемента ввода, с которым связан NgbTypeahead, затем вызвать метод focus, чтобы у ввода был фокус, и вы можете сразу начать печатать.

Я начал с демонстрации Open on focus с веб-сайта ng-bootstrap и внес следующие изменения:

Объявите новую переменную шаблона elem, чтобы элемент DOM был доступен внутри файла TS компонента (обратите внимание, что вы не можете использовать существующий instance, так как это NgbTypeahead, а не элемент HTML):

Компонент HTML: 

<input
  id="typeahead-focus"
  ...
  #instance="ngbTypeahead"
  #elem
/>

Компонент TS: 

@ViewChild('elem') elem: ElementRef;

Добавьте кнопку в шаблон, которая будет вызывать функцию фокуса - эта кнопка при нажатии откроет заголовок и сфокусируется на нем: 

<button (click)="openTypeahead()">Open Typeahead</button>

Добавьте функцию openTypeahead в файл компонента TS следующим образом: 

public openTypeahead(): void {
  // Dispatch event on input element that NgbTypeahead is bound to
  this.elem.nativeElement.dispatchEvent(new Event('input'));
  // Ensure input has focus so the user can start typing
  this.elem.nativeElement.focus();
}

Пожалуйста, посмотрите этот Stackblitz для демонстрации

...