29. リアクティブフォーム — FormControl と FormGroup

リアクティブフォームは、フォームの値や状態をTypeScript側のオブジェクトとして扱う仕組みです。1つの入力欄を FormControl('') で表し、複数をまとめた form = new FormGroup({ name: ..., email: ... }) で1つのフォームを構成します。テンプレートでは <form [formGroup]="form"> でフォーム全体を結び付け、各入力欄に formControlName="name" を書いて対応させます。

実務では、入力値をいつでも form.value で取り出せ、form.get('name')?.setValue() でプログラムから値を設定できるのが強みです。値の検証や送信ボタンの活性制御をクラス側のロジックとして書けるため、項目が多く検証も複雑な業務フォームで特に力を発揮します。

使うには ReactiveFormsModule をコンポーネントの imports に追加する必要があり、忘れると formGroup が効きません。テンプレート側だけで完結するテンプレート駆動フォームという別方式もありますが、検証ロジックをTSにまとめたい新規開発ではリアクティブフォームが基本です。

サンプルコード(フレームワーク環境が必要なため表示のみ)

import { Component } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-profile-form',
  imports: [ReactiveFormsModule],
  // [formGroup] でフォーム全体、formControlName で各入力欄を結び付ける
  template:
    '<form [formGroup]="form">' +
    '  <input formControlName="name" placeholder="名前">' +
    '  <input formControlName="email" placeholder="メール">' +
    '</form>',
})
export class ProfileFormComponent {
  form = new FormGroup({
    name: new FormControl(''),
    email: new FormControl(''),
  });
}

公式ドキュメントで詳しく ↗