フォームとモデル (5/6)
作成:2016-08-20 08:31
更新:2016-08-20 08:31
更新:2016-08-20 08:31
■チェックボックスのテンプレートを作成する
では、テンプレートを用意しましょう。AppComponent.htmlを下のリストのように修正してください。そして、実際にアクセスをしてみましょう。チェックボックスをクリックしてON/OFFすると、表示されるメッセージが変わります。
ここでは、<input type="checkbox">タグの中に、２つの属性を追加しています。[(ngModel)]="model.check" で、modelのcheckプロパティをモデル設定し、 (change)="onChange();" で、onchangeイベントにonChangeメソッドを実行しています。これで、チェック状態が変更された際にonChangeメソッドが呼びだされ、メッセージが表示されます。
ここでは、<input type="checkbox">タグの中に、２つの属性を追加しています。[(ngModel)]="model.check" で、modelのcheckプロパティをモデル設定し、 (change)="onChange();" で、onchangeイベントにonChangeメソッドを実行しています。これで、チェック状態が変更された際にonChangeメソッドが呼びだされ、メッセージが表示されます。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<div class="rect">
<h1>AppComponent</h1>
<p>{{msg}}</p>
<form>
<input type="checkbox" id="ck1"
[(ngModel)]="model.check" (change)="onChange();">
<label for="ck1">Check Box</label>
</form>
</div>
※関連コンテンツ