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 键。

干杯!

Answer 2

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

在内部，它使用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。

可能是什么原因？

谢谢！