如何在Angular 6中手动将焦点设置在mat-form-field上 [英] How to manually set focus on mat-form-field in Angular 6

问题描述

我是angular的新手，在我的应用程序中，我有一个Mat-dialog，其中有两种形式，分别是Login和SignUp.

I am new to angular ,In my application I have a mat-dialog in which I have two forms namely Login and SignUp.

第一次打开对话框时，将自动焦点设置在用户名字段上.问题是当我单击按钮导航至注册表单"时，表单的第一名"字段未自动聚焦，这与从注册导航到登录用户名的方式相同字段现在不会自动聚焦.

Once I open the dialog first time the auto focus is set on username field.problem is when I navigate to SignUp form on button click that form's FIrst Name field not get auto focused ,the same way navigate from signup to login the username field is now not get auto focused.

我已经尝试了一些stackoverflow解决方案，但是没有任何解决方案解决我的问题.

I have tried to some stackoverflow solutions but nothing is resolved my issue.

popupScreen.component.html

popupScreen.component.html

<form class="login" *ngIf="isLoginHide">
    <mat-form-field>
        <input matInput placeholder="username">
    </mat-form-field>
    <mat-form-field>
        <input matInput placeholder="password">
    </mat-form-field>

    <button mat-button color="primary">Login</button>
    <button mat-button (click)="hideLogin($event)" color="accent">SignUp</button>
</form>

<form class="SignUp" *ngIf="isSignUpHide">
    <mat-form-field>
        <input matInput placeholder="First Name">
    </mat-form-field>
    <mat-form-field>
        <input matInput placeholder="Last Name">
    </mat-form-field>
    <mat-form-field>
        <input matInput placeholder="username">
    </mat-form-field>
    <mat-form-field>
        <input matInput placeholder="password">
    </mat-form-field>

    <button mat-button (click)="hideSignUp($event)" color="primary">Login</button>
    <button mat-button color="accent">SignUp</button>
</form>

谁能帮我解决这个问题.

can anyone help me to solve this .

推荐答案

请使用 cdkFocusInitial 属性.

<mat-form-field>
    <input matInput placeholder="username" #usernameInput cdkFocusInitial>
</mat-form-field>

这篇关于如何在Angular 6中手动将焦点设置在mat-form-field上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！