angular - 如何在 Angular 6 中手动设置对 mat-form-field 的关注

Question

我是 angular 的新手，在我的应用程序中有一个 mat-dialog，其中有两种形式，即登录和注册。

一旦我第一次打开对话框，自动焦点设置在用户名字段上。问题是当我点击按钮导航到注册表单时，该表单的名字字段没有自动聚焦，同样的方式从注册导航到登录用户名字段现在不会自动聚焦。

我尝试了一些 stackoverflow 解决方案，但没有解决我的问题。

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>

谁能帮我解决这个问题。

Answer 1

请使用cdkFocusInitial输入字段中要聚焦的属性。

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