フォームとモデル (3/6)
作成:2016-08-20 08:28
更新:2016-08-20 08:28
更新:2016-08-20 08:28
■テンプレートを作成する
では、スクリプトができたところで、テンプレート側を完成させましょう。下のリスト欄に、AppComponent.htmlのサンプルを掲載しておきました。
ここでは、前回までと同様、<h1>タグと<p>タグをそのまま用意してあります。<p>には、{{msg}}として、msgの値を表示するようにしています。これは、AppComponentクラスにあったmsgプロパティです。
フォームは、非常に重要な記述が2箇所あります。1つ目は、<input type="text">に用意してある、[(ngModel)]という属性です。これは、この項目に設定されるモデルのプロパティを示します。
ここでは、model.text1としていますね? modelは、AppComponentクラスにあったmodelプロパティです。このプロパティに保管されているMyModelインスタンスのtext1プロパティを、この項目に割り当てているわけです。これにより、この入力フィールドに記入される値(value属性値)とMyModelのtext1プロパティが相互にバインドされます。
■イベントへの割当
もう1つのポイントは、プッシュボタンへのイベント割当です。これは、 (click)="onSubmit();" というように属性が用意されています。イベント関係の属性は、このように(イベント)という形で記述します。ここで、先ほどAppComponentに用意したonSubmitメソッドを呼び出しているのです。
これで、コンポーネントは完成しました。実際にページにアクセスして動作を確認してみましょう。入力フィールドに名前を書いてボタンをクリックすると、「こんにちは、○○さん!」とメッセージが表示されますよ。
ここでは、前回までと同様、<h1>タグと<p>タグをそのまま用意してあります。<p>には、{{msg}}として、msgの値を表示するようにしています。これは、AppComponentクラスにあったmsgプロパティです。
フォームは、非常に重要な記述が2箇所あります。1つ目は、<input type="text">に用意してある、[(ngModel)]という属性です。これは、この項目に設定されるモデルのプロパティを示します。
ここでは、model.text1としていますね? modelは、AppComponentクラスにあったmodelプロパティです。このプロパティに保管されているMyModelインスタンスのtext1プロパティを、この項目に割り当てているわけです。これにより、この入力フィールドに記入される値(value属性値)とMyModelのtext1プロパティが相互にバインドされます。
■イベントへの割当
もう1つのポイントは、プッシュボタンへのイベント割当です。これは、 (click)="onSubmit();" というように属性が用意されています。イベント関係の属性は、このように(イベント)という形で記述します。ここで、先ほどAppComponentに用意したonSubmitメソッドを呼び出しているのです。
これで、コンポーネントは完成しました。実際にページにアクセスして動作を確認してみましょう。入力フィールドに名前を書いてボタンをクリックすると、「こんにちは、○○さん!」とメッセージが表示されますよ。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<div class="rect"> <h1>AppComponent</h1> <p>{{msg}}</p> <form> <input type="text" [(ngModel)]="model.text1"> <input type="button" (click)="onSubmit();" value="click"> </form> </div>
※関連コンテンツ