Angular フォーム (1)：基礎

フォームモジュールを使うには

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 はじめに覚えること
• Angular フォーム (2)：バリデーション
• Angular 次に覚えること

参考資料

• 『Angular超入門』 著者：掌田 津邪乃
• https://angular.jp/start