Angular Webアプリ開発入門6

はじめに

前回はボタンがクリックされたとき何かプログラムを実行したり、メッセージを画面に差し込んだりする方法が分かった。今回は、テキストボックスに入力された読み込む処理を作っていく。

テキストボックスを操作する仕組み

Angularでテキストボックスを操作するモジュールのひとつである、FormsModuleと呼ばれるモジュールを使用する。FormsModuleをつあってテキストボックスから値を読み取るプログラムを作る流れが下記となる。

1.FormsModuleを使えるようにする
ngコマンドを使って自動生成したプロジェクトでは、最初はFormsModuleが使えるようになっていない。Angularアプリの設定ファイルであるapp.module.tsファイルを修正して、FormsModuleを使えるようにする。

2.プロパティ(変数)を用意する
コンポーネントに対して、テキストボックスに入力された値を受け取るプロパティを実装する。
今回の足し算は例では、2つのテキストボックスがあるので、それぞれに対応するプロパティ(変数)を用意する。

3.テキストボックスとプロパティを関連付ける
2.で作成したプロパティ(変数)と、テンプレート上のテキストボックスとを結びつける。

FormsModuleを使えるようにする

赤字を追加する。

import {BrowserModule }from‘@angular/platform-browser’;

import {NgModule }from‘@angular/core’;

import { FormsModule } from ‘@angular/forms’;

 

import {AppRoutingModule }from‘./app-routing.module’;

import {AppComponent }from‘./app.component’;

import {SimpleFormComponent }from‘./simple-form/simple-form.component’;

@NgModule({

declarations: [

AppComponent,

SimpleFormComponent

],

imports: [

BrowserModule,

AppRoutingModule,

FormsModule

],

providers: [],

bootstrap: [AppComponent]

})

exportclassAppModule { }

プロパティを準備する

コンポーネントを編集し、テキストボックスと関連付けるプロパティ(変数)を用意する。赤字を追加する。

import {Component,OnInit }from‘@angular/core’;

@Component({

selector:‘app-simple-form’,

templateUrl:‘./simple-form.component.html’,

styleUrls: [‘./simple-form.component.css’]

})

exportclassSimpleFormComponentimplementsOnInit {

result:string=“足し算をします”;

text1:string;

text2:string;

addAndShow() :void {

this.result=“計算しました”;

}

constructor() { }

ngOnInit() {

}

}

テキストボックスとプロパティを関連付ける

テンプレートを編集し、2つのインプット要素、上記で作成した2つのプロパティを結びつける。
「<input>」としていたものを、「<input [(ngModel)]=”プロパティ名”」と表記することで、互いに結びつく。

<input[(ngModel)]=”text1″>

+

<input [(ngModel)]=”text2″>

<button(click)=“addAndShow()”>Calc</button>

<div>{{ result }}</div>

入力された値をそのまま表示する

Calcをクリックした時、「1つ目のテキストボックスに入力された文字をそのまま表示する」は下記のソース。

import {Component,OnInit }from‘@angular/core’;

@Component({

selector:‘app-simple-form’,

templateUrl:‘./simple-form.component.html’,

styleUrls: [‘./simple-form.component.css’]

})

exportclassSimpleFormComponentimplementsOnInit {

result:string=“足し算をします”;

text1:string=“0”;

text2:string=“0”;

addAndShow() :void {

this.result=”this.text1″;

}

constructor() { }

ngOnInit() {

}

}

終わりに

今回は、テキストボックスに入力された読み込む処理を学んだ。次回はさらに作り込み、足し算機能を作っていく。

コメント