Tab 键在模式对话框内的输入中不起作用（Angular 应用程序/PrimeNG）

Question

我创建了一个组件来显示带有动态输入的简单模式对话框。这是它的外观示例：

在内部，它使用 PrimeNG 对话框，并且输入控件是从属性中接收的数组动态创建的@Input。这是我创建的表格：

    <form novalidate [formGroup]="formModel">
      <ng-container *ngFor="let field of dialogData.formControls; let i=index">
        <!-- Input field -->
        <div *ngIf="field.type != 'hidden' && field.type != 'button' && field.type != 'separator'">
          <div class="ui-inputgroup">
            <span class="ui-float-label">              
              <!-- Input control -->
              <input *ngIf="field.type != 'textarea' && field.type != 'hidden'" pInputText
                [type]="field.type" [formControlName]="field.name" [name]="field.name"
                (keyup.enter)="checkDialog()" (keyup.esc)="cancelDialog()" [tabindex]="i">

              <textarea pInputTextarea *ngIf="field.type == 'textarea'" [formControlName]="field.name" [name]="field.name" rows="3" #inputField [tabindex]="i"></textarea>

              <label [for]="field.name">
                <i [ngClass]="field.icon"></i>
                &nbsp;
                {{ field.label }}
              </label>                
            </span>                        
          </div>
          <p class="fwc-error" [hidden]="formModel.get(field.name).valid || formModel.get(field.name).pristine">{{ 'ITEM_PANEL.ERRORS.FIELD_EMPTY' | translate }}</p>
        </div>

        <!-- Separator -->
        <div class="ui-g-12" *ngIf="field.type == 'separator'"></div>

        <!-- Hidden field -->
        <input *ngIf="field.type == 'hidden'" type="hidden" [formControlName]="field.name" [name]="field.name">
      </ng-container>
    </form> 

它工作正常，但我意识到，当从现有对话框打开时（如上面的示例），我无法使用 TAB 键在控件之间移动。例如，当我直接从主菜单打开对话框时，我可以毫无问题地使用 TAB。

可能是什么原因造成的呢？

谢谢！

Answer 1

最后我可以花一些时间在这个问题上并找到一个可行的解决方案。基本上，我在动态输入上使用了自定义指令，以便稍后从组件中获取它们@ViewChildren。然后，我处理keydown.tab此输入上的事件，以使用指令在输入列表中查找目标元素，并关注下一个元素。

这是一些代码：

组件 HTML 模板

<!-- appFocusable is a simple empty directive, just to 'anotate' the inputs -->
<!-- Also, note the 'id' field, that must be unique -->
<input appFocusable (keydown.tab)="focusNext($event)" id="{{ 'INPUT_'+i }}"/>

元件代码

  // Get a list of the annotated inputs
  @ViewChildren(FocusableDirective) focusableInputs: QueryList<FocusableDirective>;

  [...]

  focusNext(event: KeyboardEvent) {
    if(event) {
      let elArray: ElementRef[] = [];

      let foundElIndex = -1;
      this.focusableInputs.forEach((focusableInput: any, index: number) => {
        if(focusableInput.el.nativeElement.id === (event.target as any).id)
          foundElIndex = index;

        elArray.push(focusableInput.el);
      });

      // foundElIndex will have the index of the input where TAB was pressed
      if(foundElIndex !== -1) {
        let nextElIndex = foundElIndex < elArray.length-1 ? foundElIndex+1 : 0;

        // Focus the next one (or the first, if we're on the last of the list)
        elArray[nextElIndex].nativeElement.focus();
      }

      event.stopPropagation();
      event.preventDefault();
    }
  }

当然，这不是最优雅的解决方案，但现在我可以在所有模式对话框中使用 TAB 键。

干杯!