【徹底解説】Angularでフォーカスを制御する：autoFocus、ViewChild、ngModel、Reactive Forms、アクセシビリティまで

Angular で新しく追加された入力要素にフォーカスを当てるには、いくつかの方法があります。

autoFocus ディレクティブ

最も簡単な方法は、autoFocus ディレクティブを使用することです。このディレクティブは、要素がレンダリングされたときに自動的にその要素にフォーカスを当てます。

<input type="text" autoFocus>

ViewChild と ngAfterViewInit ライフサイクルフックを使用して、要素に手動でフォーカスを当てることもできます。

import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <input type="text" #myInput>
  `,
})
export class AppComponent {
  @ViewChild('myInput') myInput: ElementRef;

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

import { Component, TemplateRef, ViewChild } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <ng-template #myInputTemplate>
      <input type="text">
    </ng-template>
  `,
})
export class AppComponent {
  @ViewChild('myInputTemplate') myInputTemplate: TemplateRef<any>;

  ngAfterContentInit() {
    const element = this.myInputTemplate.createEmbeddedView(null);
    const inputElement = element.rootNodes[0].querySelector('input');
    inputElement.focus();
  }
}

setTimeout 関数を使用して、要素がレンダリングされた後にフォーカスを当てることもできます。

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <input type="text">
  `,
})
export class AppComponent {
  ngAfterViewInit() {
    setTimeout(() => {
      const inputElement = document.querySelector('input');
      inputElement.focus();
    }, 0);
  }
}

• 新しい入力要素が常に最初の要素である場合は、autoFocus ディレクティブを使用するのが最も簡単です。
• 新しい入力要素が常に同じテンプレート内で作成される場合は、TemplateRef と ngAfterContentInit ライフサイクルフックを使用するのが良いでしょう。
• 新しい入力要素が動的に作成される場合は、ViewChild と ngAfterViewInit ライフサイクルフックを使用する必要があります。
• 新しい入力要素にフォーカスを当てるタイミングを制御する必要がある場合は、setTimeout 関数を使用します。

• 上記のコード例は、すべて TypeScript で記述されていますが、JavaScript でも同様に動作します。
• 上記のコード例は、最も基本的な例です。必要に応じて、コードをカスタマイズすることができます。

autoFocus ディレクティブ

<input type="text" autoFocus>

ViewChild と ngAfterViewInit ライフサイクルフック

import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <input type="text" #myInput>
  `,
})
export class AppComponent {
  @ViewChild('myInput') myInput: ElementRef;

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

TemplateRef と ngAfterContentInit ライフサイクルフック

import { Component, TemplateRef, ViewChild } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <ng-template #myInputTemplate>
      <input type="text">
    </ng-template>
  `,
})
export class AppComponent {
  @ViewChild('myInputTemplate') myInputTemplate: TemplateRef<any>;

  ngAfterContentInit() {
    const element = this.myInputTemplate.createEmbeddedView(null);
    const inputElement = element.rootNodes[0].querySelector('input');
    inputElement.focus();
  }
}

setTimeout 関数

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <input type="text">
  `,
})
export class AppComponent {
  ngAfterViewInit() {
    setTimeout(() => {
      const inputElement = document.querySelector('input');
      inputElement.focus();
    }, 0);
  }
}

説明

• 上記のコードはすべて、Angular コンポーネントクラスとテンプレートで構成されています。
• コンポーネントクラスには、ViewChild デコレータと ngAfterViewInit ライフサイクルフックを使用して、入力要素への参照を取得し、フォーカスを設定するメソッドが定義されています。
• テンプレートには、新しい入力要素が定義されています。
• autoFocus ディレクティブは、テンプレートの入力要素に直接適用されます。
• TemplateRef は、テンプレート内のコンテンツを表すオブジェクトです。
• ngAfterContentInit ライフサイクルフックは、コンポーネントのコンテンツが初期化された後に呼び出されます。

実行方法

上記コードを実行するには、次の手順に従ってください。

1. Angular プロジェクトを作成します。
2. 上記コードをコンポーネントクラスとテンプレートファイルに保存します。
3. コンポーネントをアプリケーションモジュールに登録します。
4. アプリケーションを実行します。

注意事項

• Angular の最新バージョンを使用していることを確認してください。

Angularで新しく追加された入力要素にフォーカスを当てる他の方法

focus() メソッドを使用して、入力要素に直接フォーカスを当てることができます。

import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <input type="text" #myInput>
    <button (click)="focusInput()">フォーカス</button>
  `,
})
export class AppComponent {
  @ViewChild('myInput') myInput: ElementRef;

  focusInput() {
    this.myInput.nativeElement.focus();
  }
}

ngModel ディレクティブを使用すると、入力要素の値をバインディングするだけでなく、フォーカスを設定することもできます。

<input type="text" [(ngModel)]="myValue" autofocus>

Reactive Forms を使用すると、入力要素にフォーカスを設定するカスタムバリデーターを作成できます。

import { FormControl, FormGroup, Validators } from '@angular/forms';

const myForm = new FormGroup({
  myInput: new FormControl('', [Validators.required, focusValidator]),
});

function focusValidator(control: FormControl): ValidationErrors | null {
  if (control.value) {
    control.markAsTouched();
  }
  return null;
}

Accessibility

アクセシビリティを考慮する場合は、aria-label 属性を使用して、入力要素の目的を明確に伝える必要があります。

<input type="text" aria-label="名前を入力してください" autofocus>

• 入力要素の値をバインディングする必要がある場合は、ngModel ディレクティブを使用します。
• フォームバリデーションと組み合わせて使用したい場合は、Reactive Forms を使用します。
• アクセシビリティを考慮する必要がある場合は、aria-label 属性を使用します。