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>

当用户按输入时，数据将被保存，但焦点仍保留在当前的材料输入上。我希望它能自动将焦点/标签移动到下一个材料输入组件。我可以手动标签，它的工作原理。

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

我研究了键盘标签事件，但似乎不允许这样做。

由于

史蒂夫

Answer 1

不是特定于angular_components，但对于任何角度应用，您可以在父表单中执行此操作： @ViewChildren（MaterialInputComponent） QueryList materialInputs;

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>

如何使用带有Angular组件的tabIndex（可能？）？

1 个答案: