libro
www.tuyano.com
初心者のための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入門」に戻る