フォームとモデル (6/6)
作成:2016-08-20 08:33
更新:2016-08-20 08:33
更新:2016-08-20 08:33
■ラジオボタンの利用
ラジオボタンは、複数のコントロールで構成されます。それらのうちの１つだけが選択されるようになっているコントロールです。
これは、複数のコントロールで１つの値を設定するため、モデルを使うより、項目を選択したイベント（onchangeイベント）を利用して直接処理をしたほうが簡単でしょう。
たとえば、下のリスト欄のようなテンプレートが用意されていたとしましょう。このとき、AppComponentクラスに、下のようにonChangeメソッドを用意しておきます。
３つのラジオボタンのタグでは、それぞれ (change)="onChange('radio 1');" というように、引数に値を指定してonChangeを呼び出すようにしています。３つそれぞれでonChangeの引数は異なります。この引数の値を見れば、どのラジオボタンでイベントが発生したかわかる、というわけです。
モデルを使うこともできますが、この場合、モデルの中に各ラジオボタンに値を割り当てる真偽値のプロパティを複数用意することになるでしょう。そして、それぞれの真偽値の状態を調べてどれが選択されているかを知ることになります。
まぁ、各ラジオボタンの状態が全て把握できるので便利ではありますが、ただ「どれが選択されてるか知りたいだけ」というときは面倒くさいでしょう。このonchangeイベントを利用したやり方のほうがわかりやすく簡単です。
これは、複数のコントロールで１つの値を設定するため、モデルを使うより、項目を選択したイベント（onchangeイベント）を利用して直接処理をしたほうが簡単でしょう。
たとえば、下のリスト欄のようなテンプレートが用意されていたとしましょう。このとき、AppComponentクラスに、下のようにonChangeメソッドを用意しておきます。
onChange(val) {
this.msg = '選択しているもの：' + val;
}３つのラジオボタンのタグでは、それぞれ (change)="onChange('radio 1');" というように、引数に値を指定してonChangeを呼び出すようにしています。３つそれぞれでonChangeの引数は異なります。この引数の値を見れば、どのラジオボタンでイベントが発生したかわかる、というわけです。
モデルを使うこともできますが、この場合、モデルの中に各ラジオボタンに値を割り当てる真偽値のプロパティを複数用意することになるでしょう。そして、それぞれの真偽値の状態を調べてどれが選択されているかを知ることになります。
まぁ、各ラジオボタンの状態が全て把握できるので便利ではありますが、ただ「どれが選択されてるか知りたいだけ」というときは面倒くさいでしょう。このonchangeイベントを利用したやり方のほうがわかりやすく簡単です。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<div class="rect">
<h1>AppComponent</h1>
<p>{{msg}}</p>
<form>
<div><input type="radio" name="radio1" id="r1"
(change)="onChange('radio 1');">
<label for="r1">Radio Button 1</label></div>
<div><input type="radio" name="radio1" id="r2"
(change)="onChange('radio 2');">
<label for="r2">Radio Button 2</label></div>
<div><input type="radio" name="radio1" id="r3"
(change)="onChange('radio 3');">
<label for="r3">Radio Button 3</label></div>
</form>
</div>
※関連コンテンツ