web-dev-qa-db-ja.com

Angular 6のmat-form-fieldに手動でフォーカスを設定する方法

私はangularを初めて使用します。私のアプリケーションには、ログインとサインアップという2つのフォームがあるマットダイアログがあります。

最初にダイアログを開くと、ユーザー名フィールドに自動フォーカスが設定されます。問題は、ボタンでサインアップフォームに移動するときに、フォームの最初の名前フィールドが自動フォーカスされないことです、サインアップからログインしてユーザー名フィールドに移動するのと同じ方法ですオートフォーカスされません。

いくつかの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>

誰でも私がこれを解決するのを助けることができます。

angulartypescriptangular-material
11
Zhu

フォーカスしたい入力フィールドで「cdkFocusInitial」属性を使用してください。

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

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();
    }
}
8
Aniket Avhad

ほとんど.. :-)、MatSelectなどのいくつかのマテリアルコンポーネントを使用している場合、上記のソリューションは機能しません。以下に、私に役立つソリューションを見つけることができます。

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

次にコンポーネントで...

@ViewChild('myElement') firstItem: MatSelect;

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

Angularエラーを回避するために、フォーカスを設定した後に変更検出を強制する必要があることに留意してください： "ExpressionChangedAfterItHasBeenCheckedError"（ところで、 "ChangeDetectorRef 「コンポーネントコンストラクターで）

このヘルプを願っています...

5
jspassov

名の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>
3
Prashant

useは、ネイティブ要素のフォーカスを使用できます。

このコードはテストされていませんが、次のようなものです。

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

コンポーネントで：

@ViewChild('usernameInput') usrFld: ElementRef;

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

p.s：ナビゲーションにngIfを使用するのではなく、サインアップコンポーネントにルーティングする必要があります。

1
Stavm

これは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