はじめに
これまでテキストボックスを使いながら、さまざまなディレクティブを使って、テンプレートとTypeScriptのプログラムを連動させる方法を学んできた。
ユーザーから入力を受け付ける入力コントロールには、テキストボックス以外にもテキストエリア、チェックボックス、ラジオボタン、ドロップダウンリストなど、さまざまな入力コントロールがあり、Angularではそれらも同等の記法が提供されている。
記法 | フォームの種類 | 説明 | 必要なモジュール |
ngForm | テンプレート駆動型 フォーム | フォーム全体を管理する オブジェクトを構成する | FormsModule |
ngModel | テンプレート駆動型 フォーム | テキストボックスなどの入力コントロールを管理するオブジェクトを構成する | FormsModule |
formGroup | リアクティブフォーム | フォーム全体を管理する オブジェクトを構成する
| ReactiveFormsModule |
formControlName | リアクティブフォーム | テキストボックスなどの入力コントロールを管理するオブジェクトを構成する | ReactiveFormsModule |
FormBuilderを使った入力フォームの作成
今まで、入力コントロールとFormControlをひとつひとつ設定していくのは大変である。こうした手間を省く手段として、AngularではFormBuilderを使う方法がある。
import {Component,OnInit }from‘@angular/core’;
import { FormControl, FormGroup, FormBuilder } from’@angular/forms’;
@Component({
selector: ‘app-controls’,
templateUrl: ‘./controls.component.html’,
styleUrls: [‘./controls.component.css’]
})
export classControlsComponentimplementsOnInit {
constructor(private fb: FormBuilder) { }
ngOnInit() {
}
}
①FormBuilder他のインポート
まずは、FormBuliderをインポートする。FormBuilderというクラスがライブラリ「@angular/forms」に定義されています。
それ以外に、FormControlとFormGroupも使うので、次のようにインポートする。
import { FormControl, FormGroup, FormBuilder } from’@angular/forms’;
②FormBuilderの注入
FormBuilderを使うにはこのコンポーネントの中でFormBuilderオブジェクトを作成する。そのためには、「注入（injection）」という方法を使う。具体的には、コンポーネントの「コンストラクタ」とやばれる初期化処理を」する部分に、その処理を記述するコンストラクタはconstructorという名前であり、次のように括弧の中にFormBuuilderを指定する。
このようにコンストラクタの引数として「fb」という名前をつけデータ型を記しておく、あとはどこでも「fb」という変数を「プロパティ（クラスから作成されるオブジェクトのプロパティ」として使うことができる。
FormBuilderの基本
FormBuilderはリアクティブフォームにおいて、FormControlを簡単に生成する機能を提供するものである。軽く2つのテキストボックスだけを構成してみる。
テンプレートの作成
①FormGroupの設定
form [formGroup] = “coffeeForm” novalidate>
②FormControlの結びつけ
<label>品名：<input formControlName=”name” ></label>
<label>テイスト：<input formControlName=”taste” size=”50″></label>
③Formに入力された結果をJSONとして表示する
<p>フォーム入力値:{{coffeeForm.value | json}}</p>
上記は①で結びついているFormGroupである。
<h2>コーヒー品目リスト作成</h2>
<form [formGroup] = “coffeeForm” novalidate>
<div>
<label>品名：<input formControlName=”name” ></label>
</div>
<div>
<label>テイスト：<input formControlName=”taste” size=”50″></label>
</div>
</form>
<p>フォーム入力値:{{coffeeForm.value | json}}</p>
Angularで提供されている標準フィルタ
フィルタ | 意味 |
fiter | 条件に合致するものだけに絞り込む |
currency | 金銭表示に整形する |
number | 数値表現に整形する |
date | 日付表示に整形する |
json | JSON形式に整形する |
lowercase | 小文字に変換する |
uppercase | 大文字に変換する |
limitTo | 取り出す最大数を制限する |
orderBy | 並べ替える |
クラスの作成
次にTypeScriptを修正する。修正する箇所は２点。
- coffeeFormプロパティでFormGroupと結びつけられるようにする
- nameやtasteという名称でFormControlと結びつけられるようにする
import {Component,OnInit }from‘@angular/core’;
import {FormControl,FormGroup,FormBuilder }from‘@angular/forms’;
@Component({
selector: ‘app-controls’,
templateUrl: ‘./controls.component.html’,
styleUrls: [‘./controls.component.css’]
})
export classControlsComponentimplementsOnInit {
coffeeForm:FormGroup;
constructor(privatefb:FormBuilder) {
this.coffeeForm=this.fb.group({
name: “ブレンド“,
taste: “バランスのよい口当たり“
});
}
ngOnInit() {
}
}
FormBuilderを使う場合は、上記の書式のように
{
項目名：”初期値”,
項目名：”初期値”
…
}
というデータを指定してgroupメソッドを呼びだす。すると、この設定で構成されたFormControlオブジェクトができ、それを束ねるFormGroupオブジェクトが作成される。これをテンプレートからFormGroupオブジェクトとして参照できるようにする。
終わりに
今回はFormBuilderを使用し、入力フォームを簡単に記述する方法について学んだ。次回はこの入力フォームにラジオボタン、チェックボタン、ドロップリストなどを記述する方法について学んでいく・
コメント