Клавиша Tab не работает во входах внутри модального диалога (Angular app / PrimeNG) - PullRequest
Новая
       7

Клавиша Tab не работает во входах внутри модального диалога (Angular app / PrimeNG)

1 голос
/ 25 марта 2020

Я создал компонент для отображения простого модального диалога с динамическими c входами. Вот пример того, как это выглядит:

Sample input dialog

Внутренне он использует диалог 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.

В чем причина?

Спасибо!

...