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

ユーザーからの入力を扱う場合、HTMLでは「フォーム」を利用します。このフォームをAngularで利用するには、２つの機能を覚えなくてはいけません。それは、「モデル」と「イベント」です。

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

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

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

(by. SYODA-Tuyano.)

※リストが表示されない場合

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

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