[angular] Angular 폼 배열

26 Dec 2023

angular

Angular 애플리케이션에서 폼 배열을 다루는 방법에 대해 알아보겠습니다.

폼 배열이란 무엇인가요?

폼 배열은 반복되는 항목을 다룰 때 사용됩니다. 예를 들어, 여러 사람의 정보를 입력하는 경우나 복수의 주문을 처리하는 경우 등에서 유용하게 쓰입니다.

폼 배열 생성하기

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

// 폼 배열 생성
const peopleForm = new FormGroup({
  people: new FormArray([
    new FormGroup({
      name: new FormControl(''),
      age: new FormControl('')
    })
  ])
});

위 코드에서 peopleForm은 people이라는 폼 배열을 포함하는 폼 그룹입니다. 각 people 항목은 이름과 나이를 입력할 수 있게 하는 폼 그룹입니다.

폼 배열에 아이템 추가하기

// 폼 배열에 아이템 추가
addPerson() {
  const person = new FormGroup({
    name: new FormControl(''),
    age: new FormControl('')
  });
  (peopleForm.get('people') as FormArray).push(person);
}

위 코드는 addPerson 메서드를 사용하여 people 폼 배열에 새로운 아이템(개인 정보)을 추가하는 방법을 보여줍니다.

폼 배열에서 아이템 제거하기

// 폼 배열에서 아이템 제거
removePerson(index: number) {
  (peopleForm.get('people') as FormArray).removeAt(index);
}

위 코드에서 removePerson 메서드를 사용하여 people 폼 배열에서 특정 인덱스의 아이템을 제거하는 방법을 보여줍니다.

결론

폼 배열은 Angular 애플리케이션에서 반복되는 항목을 다루는 강력한 기능입니다. 이를 활용하여 유연한 폼을 구성할 수 있습니다.

이상으로 Angular 폼 배열에 대한 간단한 소개를 마치도록 하겠습니다.

참고문헌: