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

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

» 2018年01月29日 05時00分 公開
[山田祥寛]
「Angular TIPS」のインデックス

連載目次

現在では、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>
        <!-- [1]name属性は一意に設定 -->
        <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」のインデックス

Angular TIPS

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。