Angular - основной диалог с видом вкладки с простыми bootstrap формами, не получающими автофокус на каждой форме вкладки

Question

У нас есть диалоговое окно с несколькими вкладками, отображающими формы соответственно. По умолчанию открывается первая вкладка, и когда мы нажимаем на остальные вкладки, открывается соответствующая форма. В общем, каковы действительные способы отображения автофокуса на первом поле, поскольку вкладки уже загружены и мы переключаемся между формами вкладок? </p> <pre><code><p-tabView> <p-tabPanel>Form1</p-tabPanel> <p-tabPanel>Form2</p-tabPanel> <p-tabPanel>Form3</p-tabPanel> </p-tabView>

Answer 1

Вы можете присвоить элементу ввода ссылочную переменную шаблона #myInput:

<input type="text" [(ngModel)]="title" #form1Input />

Пусть ваш компонент реализует AfterViewInit, захватывает ссылку на элемент ввода с помощью аннотации ViewChild и фокусирует ваш элемент в хуке ngAfterViewInit :

export class MyComponent implements AfterViewInit {

        @ViewChild("form1Input") private formOneInputElement: ElementRef;
        @ViewChild("form2Input") private formTwoInputElement: ElementRef;
        @ViewChild("form3Input") private formThreeInputElement: ElementRef;

        [...]

        onTabChange(event: Event): void {

            switch(event.index) {

                case 0 : {

                    this.formOneInputElement.nativeElement.focus();
                    break;
                }   

                case 1 : {

                    this.formTwoInputElement.nativeElement.focus();
                    break;
                }

                case 2: {

                    this.formThreeInputElement.nativeElement.focus();   
                    break;
                }
            }
        }
    }