如何将tabIndex(也许?)与Angular组件一起使用

Question

我有几个材料输入：

   <span *ngFor="let field of listfields">
        <material-input #keyp (keyup.tab)="keyupEnter(field,keyp.inputText,keyp)"
                        label="Edit {{getDisplayStr(field)}}"
                        floatingLabel="true"
                        [ngModel]="getFieldValue(field)">
        </material-input>

当用户按 Enter 键时，将保存数据，但焦点仍放在当前材料输入上。我希望它自动将焦点/选项卡移动到下一个材料输入组件。我可以手动选项卡，它可以工作。

我尝试使用(keyup.tab((替换keyup.enter(，但inputText用于下一个(新聚焦的(材料输入。

我研究了键盘选项卡事件的触发，但这似乎是不允许的。

谢谢

史蒂夫

Answer 1

不特定于angular_components但对于任何角度应用程序，您可以以父的形式执行此操作： @ViewChildren(材料输入组件( 查询列表材料输入;

void onEnter(KeyboardEvent event, MaterialInputComponent input) {
  event.preventDefault();
  final inputs = materialInputs.toList();
  var index = inputs.indexOf(input) + 1;
  if (index >= inputs.length) index = 0;
  inputs[index].focus();
}

然后在模板中执行此操作：

<span *ngFor="let field of listfields">
  <material-input #keyp (keyup.enter)="onEnter($event, keyp)"
                label="Edit {{getDisplayStr(field)}}"
                floatingLabel="true"
                [ngModel]="getFieldValue(field)">
  </material-input>