formControlName ディレクティブを使う

2024-04-02

Angular 2で「select」で新しい選択を取得する方法

(change) イベントを使う

最も一般的な方法は、select要素に (change) イベントリスナーを追加する方法です。このイベントは、ユーザーが新しいオプションを選択したときに発生します。

例：

<select (change)="onSelectionChange($event)">
  <option value="1">オプション 1</option>
  <option value="2">オプション 2</option>
</select>

export class MyComponent {
  selectedValue: string;

  onSelectionChange(event: Event) {
    this.selectedValue = (event.target as HTMLSelectElement).value;
  }
}

この例では、selectedValueプロパティに選択されたオプションの値を保存します。

ngModelディレクティブを使うと、select要素の選択値をコンポーネントのプロパティにバインドできます。

<select [(ngModel)]="selectedValue">
  <option value="1">オプション 1</option>
  <option value="2">オプション 2</option>
</select>

export class MyComponent {
  selectedValue: string;
}

この例では、selectedValueプロパティは常にselect要素で選択されている値と同期されます。

ViewChildデコレータを使うと、select要素への参照を取得できます。

<select #selectElement (change)="onSelectionChange($event)">
  <option value="1">オプション 1</option>
  <option value="2">オプション 2</option>
</select>

export class MyComponent {
  @ViewChild('selectElement') selectElement: HTMLSelectElement;

  onSelectionChange(event: Event) {
    const selectedValue = this.selectElement.value;
  }
}

この例では、selectElement変数を使ってselect要素の値を取得できます。

nativeElementプロパティを使うと、select要素のDOM要素への直接アクセスを取得できます。

<select (change)="onSelectionChange($event)">
  <option value="1">オプション 1</option>
  <option value="2">オプション 2</option>
</select>

export class MyComponent {
  onSelectionChange(event: Event) {
    const selectedValue = (event.target as HTMLSelectElement).nativeElement.value;
  }
}

<select (change)="onSelectionChange($event)">
  <option value="1">オプション 1</option>
  <option value="2">オプション 2</option>
</select>

export class MyComponent {
  selectedValue: string;

  onSelectionChange(event: Event) {
    this.selectedValue = (event.target as HTMLSelectElement).value;
  }
}

このコードでは、select要素に (change) イベントリスナーを追加しています。このイベントリスナーは、ユーザーが新しいオプションを選択したときに呼び出され、選択されたオプションの値を selectedValue プロパティに保存します。

実行方法

このコードを実行するには、次の手順が必要です。

Angular CLIをインストールします。

npm install -g @angular/cli

新しいプロジェクトを作成します。

ng new my-project

ng serve

Angular 2で「select」で新しい選択を取得する方法

RxJSを使うと、select要素の値の変化をストリームとして観察できます。

<select (change)="onSelectionChange($event)">
  <option value="1">オプション 1</option>
  <option value="2">オプション 2</option>
</select>

import { Observable } from 'rxjs/Observable';

export class MyComponent {
  selectedValue: string;

  constructor(private readonly changeDetectorRef: ChangeDetectorRef) {}

  ngOnInit() {
    Observable.fromEvent(this.selectElement.nativeElement, 'change')
      .subscribe((event: Event) => {
        this.selectedValue = (event.target as HTMLSelectElement).value;
        this.changeDetectorRef.detectChanges();
      });
  }
}

ngModelChange イベントは、ngModel ディレクティブと組み合わせて使用すると、select 要素の値が変更されたときに呼び出されます。

<select [(ngModel)]="selectedValue" (ngModelChange)="onSelectionChange($event)">
  <option value="1">オプション 1</option>
  <option value="2">オプション 2</option>
</select>

export class MyComponent {
  selectedValue: string;

  onSelectionChange(event: Event) {
    this.selectedValue = (event.target as HTMLSelectElement).value;
  }
}

この例では、ngModelChange イベントを使って、selectedValue プロパティを更新しています。

formControlName ディレクティブと Reactive Forms モジュールを使うと、select 要素の値をフォームコントロールにバインドできます。

<select [formControlName]="selectedValue">
  <option value="1">オプション 1</option>
  <option value="2">オプション 2</option>
</select>

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

export class MyComponent {
  selectedValue: FormControl;

  constructor(private readonly fb: FormBuilder) {}

  ngOnInit() {
    this.selectedValue = this.fb.control('');
  }
}