web-dev-qa-db-fra.com

Comment définir manuellement le focus sur mat-form-field dans Angular 6

Je suis novice dans angular. Dans mon application, j'ai un dialogue mat dans lequel j'ai deux formes nommément Login et SignUp.

Une fois que j'ouvre la boîte de dialogue pour la première fois, l'autofocus est défini sur le nom d'utilisateur field.problem est lorsque je navigue vers le formulaire d'inscription sur le bouton, cliquez sur le champ Premier nom de ce formulaire et non sur le focus automatique; ne pas se concentrer auto.

J'ai essayé quelques solutions de stackoverflow mais rien n'a résolu mon problème.

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>

quelqu'un peut-il m'aider à résoudre ce problème?.

angulartypescriptangular-material
3
Zhu

Avez-vous essayé d’ajouter autofocus au champ de formulaire pour Prénom ?

<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 peut utiliser le focus de l'élément natif.

je n'ai pas testé ce code, mais quelque chose comme ceci:

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

sur votre composant:

@ViewChild('usernameInput') usrFld: ElementRef;

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

p.s: vous devriez acheminer vers un composant d'inscription plutôt que d'utiliser ngIf pour la navigation.

1
Stavm

Presque .. :-), Si vous utilisez des composants comme MatSelect, les solutions ci-dessus ne fonctionnent pas. Vous trouverez ci-dessous une solution qui fonctionne pour moi.

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

puis en composant ...

@ViewChild('myElement') firstItem: MatSelect;

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

gardez à l'esprit que vous devez forcer la détection des modifications après avoir défini la focalisation pour éviter l'erreur angulaire: " ExpressionChangedAfterItHasBeenCheckedError " (en passant, vous devez également inclure " ChangeDetectorRef " dans votre constructeur de composants).

J'espère que cette aide ...

0
jspassov

Veuillez utiliser l'attribut "cdkFocusInitial" dans le champ de saisie sur lequel vous souhaitez effectuer la mise au point.

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