Как вручную установить фокус на поле mat-form-field в Angular 6

Question

Я новичок в angular. В моем приложении есть диалоговое окно, в котором у меня есть две формы, а именно Login и SignUp.

Как только я впервые открываю диалоговое окно, автофокус устанавливается на поле имени пользователя. Проблема заключается в том, что я перехожу к форме регистрации при нажатии кнопки, поле первого имени формы не фокусируется автоматически, так же, как при переходе от регистрации к имени пользователя поле теперь не фокусируется автоматически.

Я пытался использовать некоторые решения для работы со стеком, но моя проблема не решена.

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

Это работает для меня в Angular 8:

<mat-form-field>
    <input matInput placeholder="First Name" #firstname>
</mat-form-field>

.ts

export class TestComponent implements OnInit {

    @ViewChild('firstname', {static: true}) firstname:any;

    ngOnInit() {
      this.firstname.nativeElement.focus();
    }

}

Answer 2

Почти .. :-), если вы используете какой-либо компонент Материалы, например MatSelect - вышеуказанные решения не работают. Ниже вы можете найти решение, которое работает для меня.

<mat-form-field>
    <mat-select #myElement ......>
       ..........
    </mat-select>
<mat-form-field>

затем в компоненте ...

@ViewChild('myElement') firstItem: MatSelect;

ngAfterViewInit() {
   this.firstItem.focus();
   this.cd.detectChanges();
}

имейте в виду, что вам необходимо принудительно определить обнаружение после установки фокуса, чтобы избежать угловой ошибки: " ExpressionChangedAfterItHasBeenCheckedError " (кстати, вы также должны включить " ChangeDetectorRef " в конструкторе компонентов )

Надеюсь, эта помощь ...

Answer 3

Пожалуйста, используйте атрибут "cdkFocusInitial" в поле ввода, где вы хотите сфокусироваться.

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

Answer 4

Вы можете использовать MatInput для настройки автофокуса

вот пример,

в component.html

<mat-form-field>
    <input matInput placeholder="First Name" #firstname="matInput">
</mat-form-field>

и component.ts

import { MatInput } from '@angular/material/input';

export class Component implements OnInit {

    @ViewChild('firstname') nameInput: MatInput;

    ngOnInit() {
       this.nameInput.focus();
    }
}

Answer 5

Вы пытались добавить autofocus в поле формы для Имя ?

<form class="SignUp" *ngIf="isSignUpHide">
    <mat-form-field>
        <input matInput placeholder="First Name" autofocus>
    </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 6

использование может использовать фокус нативного элемента.

не тестировал этот код, но что-то вроде этого:

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

на вашем компоненте:

@ViewChild('usernameInput') usrFld: ElementRef;

ngAfterViewInit() {
  this.usrFld.nativeElement.focus();
}

p.s: вам следует направляться к компоненту регистрации, а не использовать ngIf для навигации.