Angular 按Enter键的行为类似于“角度”中的选项卡

我有一个角度为2+的表单组，每个表单字段都有tabIndex

如何在每次按Enter键（类似于按tab键）时将焦点更改为下一个表单字段

---

JavaScript引用-

我将使用一个简单的指令和一个更简单的服务来实现这一点

tab.directive.ts

import{Directive，Input，ElementRef，HostListener，OnInit}来自“@angular/core”；
从“/tab.service”导入{TabService}；
类型IKNOWISNUMBER=任意；
类型IKNOWISSTRING=any；
@指示({
选择器：“[tabIndex]”
})
导出类TabDirective实现OnInit{
私有索引：数字；
获取索引（）：IKNOWISNUMBER{
返回此。\u索引；
}
@输入（'tabIndex'）
集合索引（i:IKNOWISSTRING）{
这个._index=parseInt（i）；
}
@HostListener（'keydown'，['$event']））
onInput（e:任何）{
如果（e.which==13）{
this.tabService.selectedInput.next（this.index+1）
e、 预防默认值（）；
}
}
构造函数（私有el:ElementRef，私有tabService:tabService）{
}
恩戈尼尼特（）{
this.tabService.selectedInput.subscribe（（i）=>{
如果（i==this.index）{
this.el.nativeElement.focus（）；
}
});
}
}
这里有一个非常简单的方法，只需几行代码（我也在这里发布了：）：

首先，在动态创建
输入
元素时，在
模板中：1。使用唯一的数字2填充
tabIndex
属性。使用与
tabIndex
相同的唯一编号填充一个超级简单的自定义“Tag”指令，以及3。设置向下键“Enter”事件侦听器：

模板：

<ng-container *ngFor="let row in data">
   <input tabindex ="{{row[tabCol]}}" [appTag]="{{row[tabCol]}}" (keydown.enter)="onEnter($event)" . . . />
</ng-container>

注意：模数（%）操作只是为了确保如果您处于最后一个
输入
，您将循环回到第一个输入

超简单的最小“标记”
指令

import { Directive, ElementRef, Input } from '@angular/core';

@Directive({
  selector: '[appTag]'
})
export class TagDirective {
  @Input('appTag') id: number;

  constructor(public el: ElementRef) { }

}

甚至可能有一种方法可以完全摆脱“Tag”`指令，使它变得更简单，但我还没有时间去想怎么做
 我知道我的答案没有被注意到：（，但是@Eliseo，我已经尝试了代码，但在我的例子中不起作用。我正在动态生成控件。如果你放置#nextTab，我不知道，因为无法工作。检查-编写控制台.log（querycontrols.length）在createKeydownEnter函数中，检查指令是否考虑了您的控件我尝试过调试，QueryControl.length始终为0。即使我尝试了AfterViewChecked。查看新的。查看我如何引用FormArray中的控件，如
[formControl]=“lineas.at（I）.get（'prop1'）”
我尝试使用FormArrayName、GroupName等，但不起作用，但使用formControl也可以。如果不起作用，请告诉更多关于如何生成控件的数据。如果您想查看我在top@Eliseo我真的很喜欢，但我有一个问题。ViewChildren已经按tabIndex命令控件，或者您必须按progr命令它们通常在创建指令时？ViewChildren按末日中的位置对元素进行排序（我几乎相信这一点）。如果您想更改，可以：首先使用toArray传递到array，对数组进行排序，然后使用reset命令对数组进行排序。
import { Directive, ElementRef, Input } from '@angular/core';

@Directive({
  selector: '[appTag]'
})
export class TagDirective {
  @Input('appTag') id: number;

  constructor(public el: ElementRef) { }

}