フォームとモデル (2/6)
作成:2016-08-20 08:26
更新:2016-08-20 08:26
更新:2016-08-20 08:26
■モデルを利用する
では、このモデルを利用してフォームを利用した処理を行うためのコードはどうなるでしょうか。サンプルとして、前回、デフォルトで作成されたAppComponentを再利用してみることにしましょう。
下にAppComponent.tsのソースコードを掲載しておきます。先ほどのMyModelクラスと、AppComponentクラスが用意されていますね。AppComponentの@Componentアノテーションの内容は、前回説明した通りです。ここでのポイントは、AppComponentクラス部分です。
ここでは、msgとmodelという2つのプロパティを用意してあります。msgは、画面に表示するメッセージを保管するstringプロパティです。modelには、モデルクラスであるMyModelインスタンスを保管しています。MyModelでは、コンストラクタにstring型引数が1つありますから、msgのテキストをそのまま指定しています。これで、msgのテキストをtext1に設定したMyModelインスタンスが用意されます。
もう1つAppComponentに用意されているのが、onSubmitというメソッドです。これは、フォームを送信した時に実行されるメソッドです。つまり、onsubmitのイベントで呼び出されるよう割り当てられているメソッドなのです。
といっても、メソッドそのものはごく普通の引数なしのメソッドです。なにか特別なことが必要なわけではありません。ここでは、MyModelのtext1プロパティの値を取り出し、msgにテキストを設定しています。
フォームの処理は、このように「モデルのプロパティを操作する」形で行われます。フォームそのものには一切アクセスしないのです。これが、Angularのフォーム処理の特徴です。
下にAppComponent.tsのソースコードを掲載しておきます。先ほどのMyModelクラスと、AppComponentクラスが用意されていますね。AppComponentの@Componentアノテーションの内容は、前回説明した通りです。ここでのポイントは、AppComponentクラス部分です。
ここでは、msgとmodelという2つのプロパティを用意してあります。msgは、画面に表示するメッセージを保管するstringプロパティです。modelには、モデルクラスであるMyModelインスタンスを保管しています。MyModelでは、コンストラクタにstring型引数が1つありますから、msgのテキストをそのまま指定しています。これで、msgのテキストをtext1に設定したMyModelインスタンスが用意されます。
■イベント用メソッド
もう1つ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 + 'さん!'; } }
※関連コンテンツ