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

では、スクリプトができたところで、テンプレート側を完成させましょう。下のリスト欄に、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プロパティが相互にバインドされます。


もう１つのポイントは、プッシュボタンへのイベント割当です。これは、 (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>