フォームとモデル (4/6)

では、入力フィールド以外のコントロールについても見てみましょう。まずは、チェックボックスです。

チェックボックスは、クリックしてON/OFFするコントロールです。これは、選択状態を値（value）として保管します。ということは、この値はテキストではなく、真偽値であるわけです。モデルを利用する場合も、真偽値のプロパティを使ってバインドすることで、状態を知ることができます。

では、やってみましょう。まずは、スクリプト側を作成してみましょう。下にサンプルを掲載しておきます。

今回は、MyModelにcheckという項目を用意してあります。これは、boolean型の値です。これが、チェックボックスの状態を設定するのに使われます。

AppComponentクラスには、onChangeというメソッドを用意しておきました。ここで、modelのcheckの値を取り出してmsgに設定しています。やっていることは、先ほどの入力フィールドの例とほぼ同じですね。

よく見ると、プロパティの値は、!this.model.checkというように!がついています。onchangeイベントを使ってチェックボックスのvalueを取得すると、イベント発生時にはチェック状態の変更前の値が取り出されるため、このように値を反転しています。（これは、こういう仕様なのか何かのバグなのか現時点でははっきりわかりません）

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

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

export class MyModel {
    constructor(
        public check: boolean
    ) {}
}

@Component({
    moduleId: module.id,
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css']
})
export class AppComponent {
    msg = 'your name...';
    model = new MyModel(false);

    onChange() {
        this.msg = 'チェック状態：' + !this.model.check;
    }

}