Как сделать клавишу Tab как клавишу ввода в Angular Material?

Question

это мой угловой код автозаполнения

<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>

В угловом материале возникла проблема с выбором tab. Подобно тому, как автозаполнение материала не может выбрать значение при нажатии кнопки tab. но он работает, пока нажата кнопка enter. Поэтому вручную мне нужно переписать событие ключа enter для события ключа tab. Как это возможно?

Answer 1

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

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();
  }
}

Вы используете:

<input tab-directive type="text" matInput [formControl]="myControl" 
      [matAutocomplete]="auto" >

(см. stackblitz )

Обновление Мы можем контролировать только tab.key, иначе всегда вы закрываете, вы получаете выбранное значение, поэтому

@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)
      }
  }

}

(см. Новый стек)

Обновление 2 Не думаю, что в этом ответе так много откликов, потому что он неправильный. Как комментирует @Andrew allen, директива не обновляет элемент управления. Ну, уже поздно, но я пытаюсь решить. Один вариант использования

this.autoTrigger._onChange(this.autoTrigger.activeOption.value)

Еще одна идея - ввести ngControl, поэтому

  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);
      }
    })
  }