【初心者向け】Angularフォーム徹底解説！FormGroupとFormArrayを使いこなそう

2024-05-17

Angular フォーム: FormGroup と FormArray の使い分け

FormGroup

FormGroup は、オブジェクトのように構造化されたフォーム要素を管理します。各フォーム要素は、キーと値のペアとして FormControl として定義されます。これらの FormControl は、FormGroup インスタンスにネストされます。

FormGroup を使用する例：

住所情報フォーム: 郵便番号、住所、市区町村などのフォーム要素を FormGroup にまとめる

FormArray

FormArray は、配列のように構造化されたフォーム要素を管理します。各フォーム要素は、FormControl または FormGroup インスタンスとして定義できます。FormArray は、要素を追加、削除、並び替えなどの操作をサポートします。

商品リストフォーム: 商品名、価格、数量などのフォーム要素を FormArray に格納する

FormGroup と FormArray の使い分け

FormGroup と FormArray の使い分けは、フォーム構造によって異なります。

フォーム要素が固定的な構造で、キーと値のペアとして管理できる場合は FormGroup を使用します。
フォーム要素が動的に変化したり、要素の数が不定の場合は FormArray を使用します。

FormGroup と FormArray のサンプルコード

FormGroup の例

import { FormGroup, FormControl, Validators } from '@angular/forms';

const userForm = new FormGroup({
  name: new FormControl('', Validators.required),
  email: new FormControl('', [Validators.required, Validators.email]),
  address: new FormGroup({
    street: new FormControl('', Validators.required),
    city: new FormControl('', Validators.required),
    state: new FormControl('', Validators.required),
    zip: new FormControl('', Validators.required),
  }),
});

name フォーム要素は、FormControl インスタンスを使用して作成されています。Validators.required バリデーションが適用されているため、このフィールドは必須です。
email フォーム要素は、FormControl インスタンスと Validators.required および Validators.email バリデーションの配列を使用して作成されています。このフィールドは必須であり、有効なメールアドレス形式である必要があります。
address フォーム要素は、FormGroup インスタンスを使用して作成されています。この FormGroup には、street、city、state、zip という 4 つのフォーム要素が含まれています。これらのフォーム要素はすべて必須です。

FormArray の例

import { FormGroup, FormControl, FormArray, Validators } from '@angular/forms';

const itemsForm = new FormGroup({
  items: new FormArray([
    new FormGroup({
      name: new FormControl('Item 1'),
      price: new FormControl(100),
    }),
    new FormGroup({
      name: new FormControl('Item 2'),
      price: new FormControl(200),
    }),
  ]),
});

このコードでは、itemsForm という名前の FormGroup を作成しています。FormGroup には、items という名前の FormArray が含まれています。FormArray には、2 つの FormGroup インスタンスが含まれています。

各 FormGroup インスタンスは、name と price という 2 つのフォーム要素を含んでいます。

FormArray のメソッドを使用して、要素を追加、削除、並び替えできます。

// 要素を追加
itemsForm.get('items').push(new FormGroup({
  name: new FormControl('Item 3'),
  price: new FormControl(300),
}));

// 要素を削除
itemsForm.get('items').removeAt(1);

// 要素を並び替える
itemsForm.get('items').move(0, 2);

FormGroup と FormArray は、それぞれ異なる用途に適した強力なフォーム制御コンテナです。これらのコンテナを適切に使い分けることで、効率的で柔軟なフォーム開発を実現できます。

FormGroup と FormArray のその他の用途

データ構造の表現

FormGroup と FormArray は、複雑なデータ構造を表現するために使用できます。たとえば、製品カタログを作成する場合、FormGroup を使用して製品の詳細情報 (名前、説明、価格など) を格納し、FormArray を使用して製品の画像リストを格納することができます。