everything-claude-code/docs/ja-JP/skills/angular-developer/references/reactive-forms.md

リアクティブフォーム

リアクティブフォームは、フォーム入力を処理するためのモデル駆動のアプローチを提供します。オブザーバブルストリームを基盤として構築され、データモデルへの同期アクセスを提供するため、テンプレート駆動フォームよりもスケーラブルでテストしやすい特徴があります。

コアクラス

リアクティブフォームは @angular/forms の以下の基本クラスで構成されます：

• FormControl：個別の入力の値と有効性を管理します。
• FormGroup：コントロールのグループ（オブジェクトのような構造）を管理します。
• FormArray：数値インデックスによるコントロールの配列を管理します。
• FormBuilder：コントロールインスタンス作成のためのファクトリーメソッドを提供するサービス。

セットアップ

コンポーネントに ReactiveFormsModule をインポートします。

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

@Component({
  selector: 'app-profile-editor',
  imports: [ReactiveFormsModule],
  templateUrl: './profile-editor.component.html',
})
export class ProfileEditor {
  private fb = inject(FormBuilder);

  // FormBuilder を使った簡潔な定義
  profileForm = this.fb.group({
    firstName: ['', Validators.required],
    lastName: [''],
    address: this.fb.group({
      street: [''],
      city: [''],
    }),
    aliases: this.fb.array([this.fb.control('')]),
  });

  onSubmit() {
    console.warn(this.profileForm.value);
  }
}

テンプレートバインディング

モデルをビューにバインドするためのディレクティブを使用します：

• [formGroup]：FormGroup を <form> または <div> にバインドします。
• formControlName：グループ内の名前付きコントロールを入力にバインドします。
• formGroupName：ネストされた FormGroup をバインドします。
• formArrayName：ネストされた FormArray をバインドします。
• [formControl]：スタンドアロンの FormControl をバインドします。

<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
  <input type="text" formControlName="firstName" />

  <div formGroupName="address">
    <input type="text" formControlName="street" />
  </div>

  <div formArrayName="aliases">
    @for (alias of aliases.controls; track $index) {
    <input type="text" [formControlName]="$index" />
    }
  </div>

  <button type="submit" [disabled]="!profileForm.valid">Submit</button>
</form>

コントロールへのアクセス

特に FormArray のコントロールに簡単にアクセスするためのゲッターを使用します。

get aliases() {
  return this.profileForm.get('aliases') as FormArray;
}

addAlias() {
  this.aliases.push(this.fb.control(''));
}

値の更新

• patchValue()：指定されたプロパティのみを更新します。構造の不一致があっても警告なく無視します。
• setValue()：モデル全体を置き換えます。フォームの構造を厳密に強制します。

updateProfile() {
  this.profileForm.patchValue({
    firstName: 'Nancy',
    address: { street: '123 Drew Street' }
  });
}

統合変更イベント

モダンな Angular（v18+）では、すべてのコントロールに単一の events オブザーバブルが提供され、値、ステータス、pristine、touched、リセット、サブミットイベントを追跡できます。

import {ValueChangeEvent, StatusChangeEvent} from '@angular/forms';

this.profileForm.events.subscribe((event) => {
  if (event instanceof ValueChangeEvent) {
    console.log('New value:', event.value);
  }
});

手動ステート管理

• markAsTouched() / markAllAsTouched()：サブミット時にバリデーションエラーを表示するのに便利です。
• markAsDirty() / markAsPristine()：値が変更されたかどうかを追跡します。
• updateValueAndValidity()：値とステータスの再計算を手動でトリガーします。
• ほとんどのメソッドに { emitEvent: false } または { onlySelf: true } オプションを渡して伝播を制御できます。