TypeScript で実現する Angular Reactive Forms：FormGroup と FormArray でスマートに要素を削除

2024-06-17

Angular Reactive Forms の FormGroup と FormArray は、動的なフォームを作成するための強力なツールです。 FormArray は、フォーム内に可変個数の要素オブジェクトを含めることができる特別なタイプの FormGroup です。このチュートリアルでは、TypeScript を使用して FormGroup と FormArray から特定の要素オブジェクトを値に基づいて削除する方法を説明します。

例

次の例では、 items という名前の FormArray を使用して、名前と価格を持つ一連のアイテムを表すフォームを作成します。

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormArray, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  itemsForm: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.itemsForm = this.fb.group({
      items: this.fb.array([
        this.fb.group({
          name: this.fb.control('', Validators.required),
          price: this.fb.control(0, Validators.required)
        }),
        this.fb.group({
          name: this.fb.control('', Validators.required),
          price: this.fb.control(0, Validators.required)
        })
      ])
    });
  }

  removeItem(itemName: string) {
    const itemsArray = this.itemsForm.get('items') as FormArray;
    const index = itemsArray.value.findIndex(item => item.name === itemName);
    if (index !== -1) {
      itemsArray.removeAt(index);
    }
  }
}

この例では、 removeItem() 関数を使用して、特定の名前に基づいて items 配列からアイテムを削除します。

ステップバイステップの説明

itemsForm という名前の FormGroup を作成します。
items という名前の FormArray を FormGroup に追加します。
FormArray に FormGroup を追加して、各アイテムを表します。
各 FormGroup に name と price という名前の FormControl を追加します。
findIndex() メソッドを使用して、削除するアイテムのインデックスを検索します。
removeAt() メソッドを使用して、 FormArray からアイテムを削除します。

補足

findIndex() メソッドは、配列内の要素を検索するために使用されます。検索条件に一致する最初の要素のインデックスを返します。一致する要素が見つからない場合は、-1 を返します。
removeAt() メソッドを使用して、配列から要素を削除します。指定されたインデックスで要素が削除されます。

サンプルコード：Angular Reactive Forms で FormGroup と FormArray から特定の要素オブジェクトを値に基づいて削除する方法

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormArray, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  itemsForm: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.itemsForm = this.fb.group({
      items: this.fb.array([
        this.fb.group({
          name: this.fb.control('Item 1', Validators.required),
          price: this.fb.control(100, Validators.required)
        }),
        this.fb.group({
          name: 'Item 2',
          price: this.fb.control(200, Validators.required)
        })
      ])
    });
  }

  removeItem(itemName: string) {
    const itemsArray = this.itemsForm.get('items') as FormArray;
    const index = itemsArray.value.findIndex(item => item.name === itemName);
    if (index !== -1) {
      itemsArray.removeAt(index);
    }
  }
}

HTML テンプレート

<form [formGroup]="itemsForm">
  <div formArrayName="items">
    <h2>Items</h2>
    <div *ngFor="let item of itemsForm.get('items').controls; let i = index">
      <div [formGroupName]="i">
        <label for="name">Name:</label>
        <input type="text" id="name" formControlName="name">

        <label for="price">Price:</label>
        <input type="number" id="price" formControlName="price">

        <button type="button" (click)="removeItem(item.value.name)">Remove Item</button>
      </div>
    </div>
  </div>
</form>

この例では、次のことができます。

各アイテムを表すために FormGroup を FormArray に追加します。

このサンプルコードを自分のニーズに合わせてカスタマイズして、さまざまな種類のフォームを作成できます。

この例では、name プロパティを使用してアイテムを削除していますが、他のプロパティを使用して削除することもできます。
removeItem() 関数に、アイテムを削除する前に確認ダイアログを追加することもできます。
FormArray の長さを追跡して、新しいアイテムを追加するためのボタンを無効にすることができます。

Angular Reactive Forms で FormGroup と FormArray から特定の要素オブジェクトを値に基づいて削除する方法：代替方法

方法 1: filter と patchValue を使用する

この方法では、filter() メソッドを使用して、削除するアイテムを除いた新しい FormArray を作成します。次に、patchValue() メソッドを使用して、新しい FormArray を元の FormArray にパッチ適用します。

removeItem(itemName: string) {
  const itemsArray = this.itemsForm.get('items') as FormArray;
  const filteredItems = itemsArray.value.filter(item => item.name !== itemName);
  itemsArray.patchValue(filteredItems);
}

方法 2: splice を使用する

removeItem(itemName: string) {
  const itemsArray = this.itemsForm.get('items') as FormArray;
  const index = itemsArray.value.findIndex(item => item.name === itemName);
  if (index !== -1) {
    itemsArray.splice(index, 1);
  }
}

filter と patchValue を使用すると、新しい FormArray を作成する必要があるため、処理が少し複雑になります。ただし、この方法では、削除されたアイテムにアクセスできます。
splice を使用すると、処理が単純になります。ただし、この方法では、削除されたアイテムにアクセスできません。

上記の方法はほんの一例です。 FormArray からアイテムを削除する方法は他にもいくつかあります。自分に合った方法を選択してください。