wake-up-neo.net

Manuelles Einstellen des Fokus auf das Mattenfeld in Angular 6

Ich bin ein Neuling in Winkel. In meiner Anwendung habe ich einen Matten-Dialog, in dem ich zwei Formulare habe, nämlich Login und SignUp.

Sobald ich den Dialog das erste Mal öffne, wenn der Autofokus auf das Feld "Benutzername" gesetzt ist. Problem: Wenn ich zum Anmeldungsformular navigiere, klicken Sie auf das Feld "Erster Name" des Formulars und nicht auf "Autofokus". Auf dieselbe Weise navigieren Sie jetzt von der Anmeldung zum Login nicht automatisch fokussiert werden.

Ich habe ein paar Stackoverflow-Lösungen ausprobiert, aber mein Problem wurde nicht gelöst.

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>

kann mir jemand helfen, das zu lösen.

3
Zhu

Sie können MatInput zum Einstellen des Autofokus verwenden

hier ist ein Beispiel,

im component.html

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

und in component.ts

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

export class Component implements OnInit {

    @ViewChild('firstname') nameInput: MatInput;

    ngOnInit() {
       this.nameInput.focus();
    }
}
8
Aniket Avhad

Haben Sie versucht, dem Formularfeld autofocus für Vorname hinzuzufügen?

<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>
2
Prashant

use kann den Fokus des nativen Elements verwenden.

ich habe diesen Code nicht getestet, aber so etwas:

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

auf Ihrer Komponente:

@ViewChild('usernameInput') usrFld: ElementRef;

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

p.s: Sie sollten zu einer Anmeldekomponente routen, anstatt ngIf für die Navigation zu verwenden.

1
Stavm

Das funktioniert bei mir in 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();
    }

}
0
marioosh

Fast .. :-), Wenn Sie eine Materialkomponente wie MatSelect verwenden, funktionieren obige Lösungen nicht. Nachfolgend finden Sie eine Lösung, die für mich funktioniert.

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

dann in der Komponente ...

@ViewChild('myElement') firstItem: MatSelect;

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

denken Sie daran, dass Sie die Änderungserkennung nach dem Setzen des Fokus erzwingen müssen, um den Angular-Fehler zu vermeiden: " ExpressionChangedAfterItHasBeenCheckedError " (Übrigens müssen Sie auch " ChangeDetectorRef " in Ihren Komponentenkonstruktor aufnehmen).

Ich hoffe das hilft ...

0
jspassov

Verwenden Sie das Attribut "cdkFocusInitial" im Eingabefeld, auf das Sie fokussieren möchten.

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