はじめに
コンポーネントにあらかじめフォームオブジェクトなど用意しておき、テンプレートから参照するリアクティブフォームについて学んでいく。
テンプレート駆動フォームとリアクティブフォーム
Angularでフォームを構成する方法は下記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を作って凍結する
リアクティブフォームを構成する場合、テンプレートとコンポーネントを概ね、下記のように構成することで連結する。
コンポーネント側の実装
コンポーネント側ではFormGrouｐのオブジェクトを作り、その内部に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>
終わりに
今回はコンポーネントにあらかじめフォームオブジェクトなど用意しておき、テンプレートから参照するリアクティブフォームについて学んだ。
次回はボタンがクリックされた時の処理を実装していく。
コメント