Angularでフォームに「チェックボックス」のリストを設置するには？：Angular TIPS

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

» 2018年01月29日 05時00分公開

※現在では、Web標準技術を利用したアプリ開発が広く普及し、そのためのフレームワークも多数存在しています。その中でも主流のフレームワークの1つである「Angular」を活用し、そのための知識を備えることには大きな意味があります。本連載は、Angularユーザーに向けて、その使いこなしTIPSを紹介するものです。なお、本連載は「Build Insider」で公開していた連載「Angular Tips」を同サイトおよび筆者の了解を得たうえで、本フォーラムに移行したものです。記事はBuild Insiderで公開した状態のまま移行しているため、用語統一などの基準が＠ITの通常の記事とは異なる場合があります。

【対応バージョン】

　Angular 5以降。v5時点で執筆しました。

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

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

@Component({
selector: 'app-root',
template: `
<form #myForm="ngForm">
    <ng-container *ngFor="let b of books; index as i">
      <label>
        
        <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：フォームにラジオボタンのリストを設置するには？」でも触れているので、ここでは、チェックボックス固有の点について触れておきます。

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

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

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

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

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

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

「Angular TIPS」