Angular Webアプリ開発入門10

はじめに

コンポーネントにあらかじめフォームオブジェクトなど用意しておき、テンプレートから参照するリアクティブフォームについて学んでいく。

 

テンプレート駆動フォームとリアクティブフォーム

Angularでフォームを構成する方法は下記2つである

  1. テンプレート駆動フォーム
  2. リアクティブフォーム

今まで学んできたのはテンプレート駆動フォームである。テンプレート駆動フォームは、テンプレートとなるHTMLで、テキストボックスなどの入力コントロールに各種属性をつけると、それに対応するFormControlオブジェクトやFormGroupオブジェクトが出来る。

バリデータを使う場合は、HTMLに付けた属性(たとえばrequired)がそれらのオブジェクトに設定される。コンポーネントから、こうしたオブジェクトにアクセスするのがテンプレート駆動フォームである。

リアクティブフォームは、コンポーネントにあらかじめFormGroupオブジェクト、バリデータのオブジェクトなどを作っておく。そして、テンプレートの入力コントロールから、それらのオブジェクトを参照して利用する。リアクティブフォームを使うと、コンポーネントの都合でFormControlオブジェクトFormGroupオブジェクトを制御できるので、入力されたデータの複雑な制御や、柔軟なバリデータの設定が出来るなどのメリットがある。

リアクティブフォームを作る

ここでは、前回作った足し算アプリをリアクティブフォームとして作りなおす。
まずはリアクティブフォームを使ったコンポーネントを作る。

新しいコンポーネントを作成する

ng g c better-form

上記の意味は「g」は「generate」、「c」は「componet」の省略系である。

コンポーネントブラウザに表示する

上記で作成した、コンポーネントを表示する為、下記のようにapp.component.htmlを書き換える。

<app-better-form></app-better-form>

ReactiveFormsModuleを使えるようにする

リアクティブフォームは、ReactiveFormModuleという構成されている。そこでこのモジュールを使えるようにapp.module.tsを編集したインポートする。

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

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

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

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

 

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

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

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

import {BetterFormComponent }from‘./better-form/better-form.component’;

@NgModule({

declarations: [

AppComponent,

SimpleFormComponent,

BetterFormComponent,

],

imports: [

BrowserModule,

AppRoutingModule,

FormsModule,

ReactiveFormsModule

],

providers: [],

bootstrap: [AppComponent]

})

exportclassAppModule { }

FormGroupやFormControlを作って凍結する

リアクティブフォームを構成する場合、テンプレートとコンポーネントを概ね、下記のように構成することで連結する。

コンポーネント側の実装

コンポーネント側ではFormGroupのオブジェクトを作り、その内部にFormControlを含める構成をとる。

今回の足し算アプリ例だとテキストボックスが2つあるので、FormGroupのなかにFormControlを2つ含める構成となる。

テンプレート側から、これらのFormGroupやFormControlにアクセスできるように、プロパティとして、参照できるようにしておく。

テンプレート側の実装

①FormGroup
下記のように記述すると、コンポーネントのプロパティから参照できるFormGroupに結びつく
<form [formcGroup]=”プロパティ名”>

②FormControl
下記のように記述すると、コンポーネントのプロパティからFormContorolに結びつく
<input formControl=”プロパティ名”>

コンポーネント側に実装する

better-formcomponents.tsを下記のように記述する

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’]

})

export classBetterFormComponentimplementsOnInit {

calcForm: FormGroup;

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

constructor() { }

ngOnInit() {

this.calcForm =newFormGroup({

“fieldOne”: new FormControl(“0”),

“fieldTwo”: new FormControl(“0”)

});

}

get fieldOne(){return this.calcForm.get(“fieldOne”);}

get fieldTwo(){return this.calcForm.get(“fieldTwo”);}

}

テンプレート側を実装する

better-form.component.htmlを下記のように記述する

<form [formGroup]=”calcForm”>

<input formControlName=”fieldOne”>

+

<input formControlName=”fieldTwo”>

<button>Calc</button>

</form>

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

 

終わりに

今回はコンポーネントにあらかじめフォームオブジェクトなど用意しておき、テンプレートから参照するリアクティブフォームについて学んだ。

次回はボタンがクリックされた時の処理を実装していく。

 

 

コメント