フォームとモデル (1/6)
作成:2016-08-20 08:24
更新:2016-08-20 08:24
更新:2016-08-20 08:24
■モデルクラスとフォーム
ユーザーからの入力を扱う場合、HTMLでは「フォーム」を利用します。このフォームをAngularで利用するには、2つの機能を覚えなくてはいけません。それは、「モデル」と「イベント」です。
モデルというのは、フォームのように値を扱う場合に、その値を管理するために用意されるオブジェクトです。これは、特別なものというわけではなく、普通のクラスとして定義します。クラス内に、フォームの値を保管するためのプロパティを用意しておき、それをフォームの入力項目に割り当てて利用します。
実際に簡単なサンプルを作成して説明をしましょう。単純なものとして、入力フィールド(<input type="text">タグ)が1つあるだけのフォームを作成し、これ用のモデルを用意してみます。これは下のリストのようになるでしょう。
ここでは、constructorでtext1という値を1つ渡すようになっています。これがプロパティとして保管される項目になります。またクラスは、export classでエクスポートする形で作成されています。この「constructorでプロパティの項目を用意し、export classする」というのが、モデルの基本形だと考えていいでしょう。
モデルというのは、フォームのように値を扱う場合に、その値を管理するために用意されるオブジェクトです。これは、特別なものというわけではなく、普通のクラスとして定義します。クラス内に、フォームの値を保管するためのプロパティを用意しておき、それをフォームの入力項目に割り当てて利用します。
実際に簡単なサンプルを作成して説明をしましょう。単純なものとして、入力フィールド(<input type="text">タグ)が1つあるだけのフォームを作成し、これ用のモデルを用意してみます。これは下のリストのようになるでしょう。
ここでは、constructorでtext1という値を1つ渡すようになっています。これがプロパティとして保管される項目になります。またクラスは、export classでエクスポートする形で作成されています。この「constructorでプロパティの項目を用意し、export classする」というのが、モデルの基本形だと考えていいでしょう。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
export class MyModel { constructor( public text1: string ) {} }
※関連コンテンツ