Нажатие клавиши ввода ведет себя как вкладка в угловом - PullRequest
Новая
       21

Нажатие клавиши ввода ведет себя как вкладка в угловом

0 голосов
/ 09 апреля 2019

У меня есть группа форм Angular 2+, и в каждом поле формы есть tabIndex.

Как изменить фокус на следующее поле формы при каждом нажатии клавиши Enter (аналогично нажатию на вкладку)?

Справочник по JavaScript - Нажатие клавиши ввода ведет себя как вкладка в Javascript

1 Ответ

1 голос
/ 09 апреля 2019

Я бы сделал это с помощью простой директивы и гораздо более простого сервиса.

tab.directive.ts 

import { Directive, Input, ElementRef, HostListener, OnInit } from '@angular/core';
import { TabService } from './tab.service';
type IKNOWISNUMBER = any;
type IKNOWISSTRING = any;

@Directive({
  selector: '[tabIndex]'
})
export class TabDirective implements OnInit {

  private _index: number;
  get index(): IKNOWISNUMBER{
    return this._index;
  }
  @Input('tabIndex')
  set index(i: IKNOWISSTRING){
    this._index = parseInt(i);
  }

  @HostListener('keydown', ['$event'])
  onInput(e: any) {
    if (e.which === 13) {
      this.tabService.selectedInput.next(this.index + 1)
      e.preventDefault();
    }
  }
  constructor(private el: ElementRef, private tabService: TabService) { 
  }

  ngOnInit(){
    this.tabService.selectedInput.subscribe((i) => {
      if (i === this.index){
        this.el.nativeElement.focus();
      }
    });
  }
}

tab.service.ts 

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
 
@Injectable()
export class TabService {
  selectedInput: BehaviorSubject<number> = new BehaviorSubject<number>(1);
}

Я создал небольшой stackblitz , чтобы показать, как он работает.

P.S. Не забудьте предоставить tab.service внутри каждого компонента форму, потому что вам нужен определенный экземпляр для каждой формы.

...