如何在 Angular 6 中手动设置对 mat-form-field 的关注 [英] How to manually set focus on mat-form-field in Angular 6

问题描述

我是 angular 的新手，在我的应用程序中，我有一个 mat-dialog，其中有两个表单，即登录和注册.

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 输入字段中要聚焦的属性.

Kindly use cdkFocusInitial attribute in input field where you want to focus.

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

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