Angular Webアプリ開発入門13

はじめに

これまでテキストボックスを使いながら、さまざまなディレクティブを使って、テンプレートと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を修正する。修正する箇所は2点。

  1. coffeeFormプロパティでFormGroupと結びつけられるようにする
  2. 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を使用し、入力フォームを簡単に記述する方法について学んだ。次回はこの入力フォームにラジオボタン、チェックボタン、ドロップリストなどを記述する方法について学んでいく・

 

コメント