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

では、このモデルを利用してフォームを利用した処理を行うためのコードはどうなるでしょうか。サンプルとして、前回、デフォルトで作成されたAppComponentを再利用してみることにしましょう。

下にAppComponent.tsのソースコードを掲載しておきます。先ほどのMyModelクラスと、AppComponentクラスが用意されていますね。AppComponentの@Componentアノテーションの内容は、前回説明した通りです。ここでのポイントは、AppComponentクラス部分です。

ここでは、msgとmodelという２つのプロパティを用意してあります。msgは、画面に表示するメッセージを保管するstringプロパティです。modelには、モデルクラスであるMyModelインスタンスを保管しています。MyModelでは、コンストラクタにstring型引数が１つありますから、msgのテキストをそのまま指定しています。これで、msgのテキストをtext1に設定したMyModelインスタンスが用意されます。



もう１つAppComponentに用意されているのが、onSubmitというメソッドです。これは、フォームを送信した時に実行されるメソッドです。つまり、onsubmitのイベントで呼び出されるよう割り当てられているメソッドなのです。

といっても、メソッドそのものはごく普通の引数なしのメソッドです。なにか特別なことが必要なわけではありません。ここでは、MyModelのtext1プロパティの値を取り出し、msgにテキストを設定しています。

フォームの処理は、このように「モデルのプロパティを操作する」形で行われます。フォームそのものには一切アクセスしないのです。これが、Angularのフォーム処理の特徴です。

(by. SYODA-Tuyano.)

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

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

import { Component } from '@angular/core';

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

@Component({
    moduleId: module.id,
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css']
})
export class AppComponent {
    msg = 'your name...';
    model = new MyModel(this.msg);

    onSubmit() {
        this.msg = 'こんにちは、' + this.model.text1 + 'さん！';
    }

}