Angularでリアクティブフォームのネストされたフォームグループを使用する方法

1. フォームグループを作成します。フォームグループは、ネストされたフォームコントロールをグループ化するためのコンテナです。

import { FormGroup, FormControl } from '@angular/forms';
// ネストされたフォームグループを作成
const nestedFormGroup = new FormGroup({
  nestedControl1: new FormControl(),
  nestedControl2: new FormControl()
});
// ルートのフォームグループを作成
const rootFormGroup = new FormGroup({
  control1: new FormControl(),
  control2: new FormControl(),
  nestedGroup: nestedFormGroup // ネストされたフォームグループをルートグループに追加
});

2. テンプレートでフォームグループをバインドします。formGroup ディレクティブを使用して、フォームグループをテンプレートにバインドします。

<form [formGroup]="rootFormGroup">
  <input formControlName="control1" placeholder="Control 1">
  <input formControlName="control2" placeholder="Control 2">

  <div formGroupName="nestedGroup"> <!-- ネストされたフォームグループをバインド -->
    <input formControlName="nestedControl1" placeholder="Nested Control 1">
    <input formControlName="nestedControl2" placeholder="Nested Control 2">
  </div>
</form>

3. フォームの値を取得します。value プロパティを使用して、フォームの値を取得できます。

const formValue = rootFormGroup.value;
console.log(formValue);

以上の手順に従うことで、Angularでリアクティブフォームのネストされたフォームグループを作成することができます。これにより、複雑なフォームの状態を効果的に管理し、コンポーネントとテンプレートの間でデータをバインドすることができます。