PC | mobile ver.20170108.

 libro ~入門ドキュメント・サイト~

初心者のためのAngular2入門:

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

作成:2016-08-20 08:24
更新:2016-08-20 08:24
■モデルクラスとフォーム
ユーザーからの入力を扱う場合、HTMLでは「フォーム」を利用します。このフォームをAngularで利用するには、2つの機能を覚えなくてはいけません。それは、「モデル」と「イベント」です。

モデルというのは、フォームのように値を扱う場合に、その値を管理するために用意されるオブジェクトです。これは、特別なものというわけではなく、普通のクラスとして定義します。クラス内に、フォームの値を保管するためのプロパティを用意しておき、それをフォームの入力項目に割り当てて利用します。

実際に簡単なサンプルを作成して説明をしましょう。単純なものとして、入力フィールド(<input type="text">タグ)が1つあるだけのフォームを作成し、これ用のモデルを用意してみます。これは下のリストのようになるでしょう。

ここでは、constructortext1という値を1つ渡すようになっています。これがプロパティとして保管される項目になります。またクラスは、export classでエクスポートする形で作成されています。この「constructorでプロパティの項目を用意し、export classする」というのが、モデルの基本形だと考えていいでしょう。



 

※プログラムリストが表示されない場合

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

export class MyModel {
    constructor(
        public text1: string
    ) {}
}


 


「初心者のためのAngular2入門」に戻る



※その他のコンテンツ