フォームモジュールを使うには
app.module.ts で、FormsModule をインポートする
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [ 省略 ],
imports: [
FormsModule
],
providers: [ 省略 ],
bootstrap: [ 省略 ]
})
テンプレート駆動型：双方向バインディング
コンポーネントのクラス変数値とフォーム値を同期する仕組み。
例えば、画面で入力した値をクラス変数にも反映する場合に使います。逆も然り。
テンプレート側が主導して値をバインドしているので、テンプレート駆動フォームと呼ばれている。
次のサンプルでは、入力値が上に表示されます。
コンポーネントTSファイル
xyz:string = "abc";
コンポーネントHTMLファイル
xyz: {{xyz}}<br>
<input type="text" [(ngModel)]="xyz">
リアクティブ型フォーム
コンポーネントクラス側で、モデルを用意して、それをテンプレート側に設定する方法をリアクティブ型フォームと呼ぶ。
利用方法
app.module.ts で、ReactiveFormsModule のインポートが必要です。
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [ 省略 ],
imports: [
FormsModule,
ReactiveFormsModule
],
providers: [ 省略 ],
bootstrap: [ 省略 ]
})
FormControl
コンポーネントTSファイルにて、FormControlクラスの変数を定義する。
ボタンをクリックしたら、フォームコントロール変数の値を画面に表示するメソッド show() も実装します。
sampleControl:FormControl = new FormControl('Sample');
message:string = "";
show() {
this.message = sampleControl.value;
}
コンポーネントHTMLファイルでは formControl属性に、定義した変数を指定する。
フォームコントロールの入力値がボタンクリックで、メッセージに表示されます。
<p>{{message}}</p>
<input type="text" [formControl]="sampleControl" />
<button (click)="show()">Click</button>
FormGroup
FormControlだけだと入力項目数だけ変数作成して個別に管理するのは大変。そんな時に、フォーム全体を１つにまとめて管理するのがFormGroupです。
コンポーネントTSファイル
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
@Component({ 省略 })
export class ...Component implements OnInit {
sampleGroupForm:FormGroup;
ngOnInit() {
this.sampleGroupForm = new FormGroup({
name: new FormControl(''),
mail: new FormControl(''),
age: new FormControl(0),
});
}
}
コンポーネントHTMLファイル
<form [formGroup]="プロパティ" (ngSubmit)="メソッド">
<input type="text" formControlName="名前" />
<input type="submit" value="登録">
</form>
参考本では、リアクティブフォームを使う際は、(submit)="" ではなく(ngSubmit)="" 使うと記載があるのだが、(submit)の方を使っているサンプルもあり、理由が分からず混乱中・・・。
本家サイトでは、(ngSubmit)を使っているサンプルがあった。
https://angular.jp/start/start-forms
使い分ける必要があるのか、どちらでも構わないのかは分からず。
formControlは、関連付けるタグの種類( <input type>, <select> ) によって valueも変わる。例えば、<input type="checkbox">なら真偽値になる。
FormBuilder
更にFormGroupよりも、簡易に扱えるのがFormBuilderを使った方法です。
コンポーネントTSファイル
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
@Component({ 省略 })
export class ...Component implements OnInit {
fg:FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.fg = this.fb.group({
name: [''],
mail: [''],
age: [0]
});
}
}
関連記事
参考資料
- 『Angular超入門』 著者：掌田 津邪乃
- https://angular.jp/start