angular - 如何从扩展面板跳过标签顺序？

Question

我在 mat-expansion-panel 中有输入字段。按tab键时，tab顺序包括mat-expansion-panel。所以我设置了 tabindex=-1 但在按下 tab 键时仍然没有跳过 mat-expansion-panel 。

按tab键时，光标移动如下

但我想跳过 Peronal 数据扩展面板，我希望光标移动如下

tabindex=-1 不起作用。我怎样才能做到这一点？这里是stackbiz

标签： angularmat-expansion-panel

Answer 1

设置tabindex="1"所有输入。如果您不想弄乱模板，可以使用自动执行此操作的指令：

@Directive({
  selector: 'input',
})
export class TabIndexOne {
  @HostBinding('tabindex') idx = 1;
}

示例StackBlitz