时间戳

首页 > 解决方案 > Angular - 带有选项卡视图的启动对话框，具有简单的引导表单，不会自动聚焦到每个选项卡表单

angular - Angular - 带有选项卡视图的启动对话框，具有简单的引导表单，不会自动聚焦到每个选项卡表单

问题描述

我们有一个primeng对话框，其中有多个分别显示表单的选项卡。默认的第一个选项卡被打开，当我们点击 rest tabs 时，相应的表单被打开。一般来说，什么是显示自动对焦到表单第一个字段的有效方法，因为选项卡已经加载并且我们正在选项卡表单之间切换？ 

<p-tabView>
    <p-tabPanel>Form1</p-tabPanel>
    <p-tabPanel>Form2</p-tabPanel>
    <p-tabPanel>Form3</p-tabPanel>
</p-tabView>

标签： angularprimeng

解决方案

您可以为输入元素分配一个模板引用变量#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;
                }
            }
        }
    }

推荐阅读