Angular で ngSelect と ngx-multiselect を使う複数選択セレクトボックス

Angular2: select 要素に複数値をバインドする方法

ngModel を使用する

ngModel ディレクティブを使用して、select 要素にバインドする値を指定できます。この場合、select 要素の multiple 属性を設定する必要があります。

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

上記のコードでは、selectedValues 変数に選択されたオプションの値がバインドされます。

selectedValues: number[] = [];

formGroup を使用する

formGroup ディレクティブを使用して、フォームコントロールをグループ化できます。この場合、select 要素にバインドする値を FormControl オブジェクトで指定できます。

<form [formGroup]="form">
  <select formControlName="selectedValues" multiple>
    <option value="1">オプション 1</option>
    <option value="2">オプション 2</option>
    <option value="3">オプション 3</option>
  </select>
</form>

上記のコードでは、form 変数に FormGroup オブジェクトが設定されています。

form = new FormGroup({
  selectedValues: new FormControl([], [Validators.required]),
});

selectedValues コントロールは、選択されたオプションの値の配列を保持します。

どちらの方法を選択するべきか

どちらの方法を選択するかは、状況によって異なります。

• ngModel は、シンプルなフォームを作成する場合に適しています。
• formGroup は、複雑なフォームを作成する場合や、フォームコントロールのバリデーションが必要な場合に適しています。

• select 要素には、option 要素以外にも optgroup 要素を使用できます。
• select 要素には、disabled 属性や required 属性を設定できます。

<div>
  <h2>ngModel を使用する</h2>
  <select [(ngModel)]="selectedValues" multiple>
    <option value="1">オプション 1</option>
    <option value="2">オプション 2</option>
    <option value="3">オプション 3</option>
  </select>
  <p>選択された値: {{ selectedValues }}</p>
</div>

TypeScript

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

@Component({
  selector: 'app-ng-model',
  template: `
    <div>
      <h2>ngModel を使用する</h2>
      <select [(ngModel)]="selectedValues" multiple>
        <option value="1">オプション 1</option>
        <option value="2">オプション 2</option>
        <option value="3">オプション 3</option>
      </select>
      <p>選択された値: {{ selectedValues }}</p>
    </div>
  `,
})
export class NgModelComponent {
  selectedValues: number[] = [];
}

<div>
  <h2>formGroup を使用する</h2>
  <form [formGroup]="form">
    <select formControlName="selectedValues" multiple>
      <option value="1">オプション 1</option>
      <option value="2">オプション 2</option>
      <option value="3">オプション 3</option>
    </select>
    <p>選択された値: {{ form.value.selectedValues }}</p>
  </form>
</div>

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

@Component({
  selector: 'app-form-group',
  template: `
    <div>
      <h2>formGroup を使用する</h2>
      <form [formGroup]="form">
        <select formControlName="selectedValues" multiple>
          <option value="1">オプション 1</option>
          <option value="2">オプション 2</option>
          <option value="3">オプション 3</option>
        </select>
        <p>選択された値: {{ form.value.selectedValues }}</p>
      </form>
    </div>
  `,
})
export class FormGroupComponent {
  form = new FormGroup({
    selectedValues: new FormControl([], [Validators.required]),
  });
}

このコードは、2 つの異なる方法で複数選択可能なセレクトボックスを実装する方法を示しています。どちらの方法を選択するかは、状況によって異なります。

• このコードは、Angular 14 で動作することを確認しています。
• コードには、エラー処理やバリデーションを追加する必要があります。
• コードは、コンポーネント、テンプレート、スタイルシートに分割できます。

ngSelect ディレクティブを使用する

ngSelect は、Angular 用のサードパーティ製ライブラリで、複数選択を含むさまざまな機能を備えたセレクトボックスコンポーネントを提供します。

<ng-select [items]="options" [(ngModel)]="selectedValues" multiple>
  <ng-option [value]="item.value" [label]="item.label"></ng-option>
</ng-select>

import { Component } from '@angular/core';
import { NgSelectComponent } from 'ng-select';

@Component({
  selector: 'app-ng-select',
  template: `
    <div>
      <h2>ngSelect を使用する</h2>
      <ng-select [items]="options" [(ngModel)]="selectedValues" multiple>
        <ng-option [value]="item.value" [label]="item.label"></ng-option>
      </ng-select>
      <p>選択された値: {{ selectedValues }}</p>
    </div>
  `,
})
export class NgSelectComponent {
  options = [
    { value: 1, label: 'オプション 1' },
    { value: 2, label: 'オプション 2' },
    { value: 3, label: 'オプション 3' },
  ];
  selectedValues: number[] = [];
}

<ngx-multiselect [items]="options" [(ngModel)]="selectedValues" multiple>
  <ngx-multiselect-option [item]="item"></ngx-multiselect-option>
</ngx-multiselect>

import { Component } from '@angular/core';
import { MultiSelect } from 'ngx-multiselect';

@Component({
  selector: 'app-ngx-multiselect',
  template: `
    <div>
      <h2>ngx-multiselect を使用する</h2>
      <ngx-multiselect [items]="options" [(ngModel)]="selectedValues" multiple>
        <ngx-multiselect-option [item]="item"></ngx-multiselect-option>
      </ngx-multiselect>
      <p>選択された値: {{ selectedValues }}</p>
    </div>
  `,
})
export class NgxMultiselectComponent {
  options = [
    { id: 1, name: 'オプション 1' },
    { id: 2, name: 'オプション 2' },
    { id: 3, name: 'オプション 3' },
  ];
  selectedValues: number[] = [];
}

カスタムコンポーネントを作成する

独自の要件を満たすために、カスタムコンポーネントを作成することもできます。

<app-multi-select [(selectedOptions)]="selectedValues"></app-multi-select>

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-multi-select',
  template: `
    <div>
      <h2>カスタムコンポーネントを使用する</h2>
      <select multiple [(ngModel)]="selectedOptions">
        <option *ngFor="let option of options" [value]="option.value">{{ option.label }}</option>
      </select>
      <p>選択された値: {{ selectedOptions }}</p>
    </div>
  `,
})
export class MultiSelectComponent {
  @Input() options: any[];
  @Output() selectedOptionsChange = new EventEmitter<any[]>();

  @Input()
  set selectedOptions(values: any[]) {
    this._selectedOptions = values;
    this.selectedOptionsChange.emit(this._selectedOptions);
  }

  get selectedOptions(): any[] {
    return this._selectedOptions;
  }

  private _selectedOptions: any[] = [];
}