Angular Webアプリ開発入門11

はじめに

今回はボタンがクリックされたときの処理を実装する。リアクティブフォームでは、結び付けられたFormControlオブジェクトを通じて、入力された値を取得する。(値を設定することもでき、値を設定すれば、その値がフォームに表示される)。

文字連結も出来る足し算機能を作る

テンプレート駆動型のフォーム同様に、[Calc]ボタンがクリックされたとき、「数字でないものが入力されたときはそれを結合する。」という処理を作る。

ボタンがクリックされたときに実行されるメソッドを指定する。

今回はメソッド名をaddAnywayにする

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

ボタンがクリックされたときの処理をメソッドとして記述する

次にaddAnywayメソッドをコンポーネントに実装する。赤字が追加部分。

 

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

import {FormGroup,FormControl }from‘@angular/forms’;

@Component({

selector:‘app-better-form’,

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

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

})

exportclassBetterFormComponentimplementsOnInit {

calcForm:FormGroup;

result:string =“足し算しましょう”

constructor() { }

tngOnInit() {

this.calcForm =newFormGroup({

“fieldOne”:newFormControl(“0”),

“fieldTwo”:newFormControl(“0”),

});

}

getfieldOne(){returnthis.calcForm.get(“fieldOne”);}

getfieldTwo(){returnthis.calcForm.get(“fieldTwo”);}

addAnyway() {

let text1:string = this.fieldOne.value;

let text2:string = this.fieldTwo.value;

let resultStr: string = “”;

if (Number.isNaN(Number(text1)) || Number.isNaN(Number(text2))) {

resultStr = text1 + text2;

} else {

resultStr =`${text1}+${text2} = ${Number(text1) + Number(text2)}`;

}

this.result = resultStr;

}

}

①値の取得
リアクティブフォームでは、入力コントロールに入力された値は、FormControlオブイジェクトに格納されている。すでにテンプレート側で、左側のテキストボックスにfiledOneプロパティ、右側をfieldTwoプロパティと結び付けているので、これらのプロパティがさしているFormControlオブジェクトに格納される。FormControlオブジェクトが現在保持している荒いは、valueプロパティで参照できる。

②足し算または文字列に決方
前回学んだようにNumberu関数を使う数値に変換できる。数値の変換に失敗したとき、Number.isNaNが成り立つ。そこで 「どちらも数値であるときは、足し算する」「そうでなければ連結する」という処理をする。文字の連結はNumber関数を使って変換せずに、そのまま「+」記号を使うことで表現できる。

if (Number.isNaN(Number(text1)) ||Number.isNaN(Number(text2))) {

resultStr =text1 +text2;

}else {

resultStr =`${text1}+${text2} =${Number(text1) +Number(text2)}`;

}

計算結果はresultプロパティに設定している。

this.result =resultStr;

この結果は、テンプレート側の「{{result}}」と書いてたころに差しこまれて表示される。

 

終わりに

今回はリアクティブフォームで、結び付けられたFormControlオブジェクトを通じて、ボタンがクリックされたときに実行・処理されるメソッドを指定し、入力された値を取得するプログラムを実装した。

次回はリアクティブフォームでバリデータの設定について学んでいく。

 

 

コメント