Angular TIPS

Angular TIPS

フォームにチェックボックスのリストを設置するには?

2018年1月29日

選択肢の中から複数を選択する「チェックボックスのリスト」を設置するための基本的な方法を解説する。

  • このエントリーをはてなブックマークに追加

【対応バージョン】 Angular 5以降。v5時点で執筆しました。

 本稿では、Angularアプリでチェックボックスのリスト(複数選択リスト)を設置するためのポイントを解説します。以下は、あらかじめ用意されたオブジェクト配列booksを基に、チェックボックスを生成する例です。また、チェックボックスの選択を変更した場合、ログにも選択値を出力するものとします。

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

@Component({
  selector: 'app-root',
  template: `
  <form #myForm="ngForm">
    <ng-container *ngFor="let b of books; index as i">
      <label>
        <!-- 1name属性は一意に設定 -->
        <input type="checkbox" name="book{{i}}"
          id="book{{i}}"
          [(ngModel)]="books[i].selected"
          [value]="b.isbn" 
          (change)="show()">{{b.title}}
      </label><br />
    </ng-container>
  </form>
`
})
export class AppComponent {
  sbook = '978-4-7741-9130-0';
  // 2チェックボックスの状態を管理
  books = [
    { isbn: '978-4-8222-9894-4', title: '基礎からしっかり学ぶC#の教科書',
      selected: false },
    { isbn: '978-4-8222-5355-4', title: 'アプリを作ろう! Visual C#入門',
      selected: false },
    { isbn: '978-4-7741-9130-0', title: 'Angularアプリケーションプログラミング',
      selected: true },
    { isbn: '978-4-7741-9030-3', title: 'C#ポケットリファレンス',
      selected: false },
    { isbn: '978-4-7741-8994-9', title: 'HTML&CSS 超入門',
      selected: false }
  ];

  show() {
    console.log(this.books);
  }
}
配列を基にチェックボックスのリストを生成するコード(app.component.ts)
チェックボックスの状態をログ表示

 以下に、チェックボックスリスト生成のポイントをまとめていきます。もっとも、ngForディレクティブ+<ng-container>要素の組み合わせでリストを生成する点は、別稿「TIPS:フォームにラジオボタンのリストを設置するには?」でも触れているので、ここでは、チェックボックス固有の点について触れておきます。

1name属性は一意になるように

 ラジオボタンと異なり、チェックボックスのリストは複数選択が可能である前提なので、name属性も個々の要素で一意になるように設定しておきます。ここでは、id属性と同じく、「book+インデックス番号」としています。

2チェックボックスの状態はオブジェクト配列で管理

 チェックボックスの状態は、元となるデータ配列と合わせて管理するのが直観的です。ここではcheckedプロパティを設けて、それぞれのチェック状態を表すようにしています。checkedプロパティには、ngModelディレクティブにひもづけることで、チェックボックスのオン/オフがそのまま反映されるようになります。

 サンプルでは、changeイベントハンドラーでオブジェクト配列dataの内容を都度ログに出力するようにしています。確かに、チェックボックスの状態がcheckedプロパティに反映されていることが確認できます。

処理対象:ディレクティブ(Directive) カテゴリ:基本
API:NgForOf(*ngFor) カテゴリ:@angular > common > DIRECTIVE(ディレクティブ)

※以下では、本稿の前後を合わせて5回分(第37回~第41回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

Angular TIPS
37. フォームの状態を監視するには?(ngForm/ngModel)

Angularにより拡張されている標準的な<form>/<input>要素を使って、入力の有無を判定したり、サブミット済みかを判定したりと、その状態を監視する方法を説明する。

Angular TIPS
38. フォームにラジオボタンのリストを設置するには?

選択肢の中から1つを選択する「ラジオボタンのリスト」を設置するための基本的な方法を解説する。

Angular TIPS
39. 【現在、表示中】≫ フォームにチェックボックスのリストを設置するには?

選択肢の中から複数を選択する「チェックボックスのリスト」を設置するための基本的な方法を解説する。

Angular TIPS
40. コンポーネントからページのタイトルを操作するには?(Title)

Titleサービスを使って、コンポーネントからページタイトルを設定する方法を説明する。

Angular TIPS
41. コンポーネント要素に属性/イベントをバインドするには?(hostパラメーター)

@Componentデコレーターのhostパラメーターを使って、コンポーネント要素そのものに属性やイベントをバインドする方法を説明する。

サイトからのお知らせ

Twitterでつぶやこう!