Angularのフォーム処理入門
〜テンプレート駆動 vs リアクティブフォーム〜

Angularでは、フォームを操作する方法として主に2つのアプローチがあります。
それがテンプレート駆動フォームとリアクティブフォームです。
本章ではそれぞれの使い方、バリデーション方法、そして選択基準を丁寧に解説します。

1. テンプレート駆動フォーム

テンプレート駆動フォームは、HTMLテンプレートにフォームロジックを記述するシンプルな方法です。初心者にとって理解しやすく、簡単なフォームには最適です。

■ 必要モジュールのインポート

// app.module.ts
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    FormsModule
  ]
})
export class AppModule {}

■ HTMLテンプレート例

<form #userForm="ngForm" (ngSubmit)="onSubmit()">
  <input name="username" [(ngModel)]="username" required />
  <button type="submit" [disabled]="userForm.invalid"&gt;送信</button>
</form>

<p>入力された名前: {{ username }}</p>

■ コンポーネントクラス

export class AppComponent {
  username = '';

  onSubmit() {
    console.log('送信:', this.username);
  }
}

2. 双方向バインディング：ngModel

[(ngModel)] は、Angularの双方向バインディング構文です。テンプレートとコンポーネントの変数が自動で同期されます。

<input [(ngModel)]="email" name="email" />
<p>現在の入力: {{ email }}</p>

3. バリデーション（テンプレート駆動）

テンプレート側にrequiredやemailなどの属性を追加することで、簡易なバリデーションが可能です。

<input name="email" [(ngModel)]="email" required email />
<div *ngIf="userForm.controls['email']?.invalid && userForm.controls['email']?.touched">
  正しいメールアドレスを入力してください。
</div>

4. リアクティブフォーム

リアクティブフォームは、フォームの構造やバリデーションをTypeScriptコード側で厳密に定義する方法です。複雑なフォームや条件付きロジックに向いています。

■ 必要モジュールのインポート

// app.module.ts
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    ReactiveFormsModule
  ]
})
export class AppModule {}

■ コンポーネントクラス

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html'
})
export class LoginComponent {
  loginForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.loginForm = this.fb.group({
      email: ['', [Validators.required, Validators.email]],
      password: ['', Validators.required]
    });
  }

  onSubmit() {
    if (this.loginForm.valid) {
      console.log(this.loginForm.value);
    }
  }
}

■ HTMLテンプレート

<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
  <input formControlName="email" placeholder="メールアドレス" />
  <div *ngIf="loginForm.controls['email'].invalid && loginForm.controls['email'].touched">
    正しいメールアドレスを入力してください。
  </div>

  <input type="password" formControlName="password" placeholder="パスワード" />

  <button type="submit" [disabled]="loginForm.invalid">ログイン</button>
</form>

5. 比較表：テンプレート駆動 vs リアクティブフォーム

項目	テンプレート駆動フォーム	リアクティブフォーム
定義場所	テンプレート（HTML）	TypeScript（クラス）
適した用途	シンプルなフォーム	複雑・動的フォーム
バリデーション	テンプレートで設定	コードで明示的に定義
学習コスト	低め	高めだが柔軟

まとめ

Angularではフォームの処理方法として、テンプレート駆動とリアクティブの2種類があります。どちらも一長一短があり、プロジェクトの規模や要件によって使い分けることが重要です。