[angular] Angular 폼 폼 배열 다이내믹

26 Dec 2023

angular

Angular 앱을 개발하다 보면 동적으로 생성되는 폼 필드를 다루어야 하는 경우가 있습니다. 특히, 폼 배열을 동적으로 처리해야 하는 경우가 있을 때 이를 다루는 방법을 소개하겠습니다.

컴포넌트 생성

먼저, Angular CLI를 사용하여 새로운 폼 배열을 다루는 컴포넌트를 생성합니다.

ng generate component dynamic-form

생성된 dynamic-form 컴포넌트에서는 동적으로 생성된 폼 필드를 다룰 수 있도록 준비를 합니다.

동적 폼 배열 생성

dynamic-form 컴포넌트에는 동적으로 생성된 폼 필드들의 배열을 가지고 있어야 합니다. 이를 위해 FormArray를 사용할 수 있습니다. 예를 들어, 여러 개의 인풋 필드를 포함하는 폼을 생성하려면 다음과 같은 방식으로 FormArray를 활용할 수 있습니다.

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

export class DynamicFormComponent {

  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      fields: this.fb.array([])
    });
  }

  addField() {
    const field = this.fb.group({
      name: '',
      value: ''
    });

    this.fields.push(field);
  }

  get fields() {
    return (this.form.get('fields') as FormArray);
  }
}

위 코드에서 fields는 동적으로 생성되는 폼 필드들을 담을 FormArray입니다. addField 메서드를 통해 필드를 추가할 수 있습니다.

템플릿에 FormArray 바인딩

이제, 템플릿에서 FormArray와 함께 반복문을 사용하여 동적으로 생성된 폼 필드들을 표시합니다.

<form [formGroup]="form">
  <div formArrayName="fields">
    <div *ngFor="let field of fields.controls; let i = index;">
      <div [formGroupName]="i">
        <input formControlName="name" placeholder="Name">
        <input formControlName="value" placeholder="Value">
      </div>
    </div>
  </div>
  <button type="button" (click)="addField()">Add Field</button>
</form>

위의 템플릿에서는 FormArray에 반복문을 사용하여 동적으로 생성된 폼 필드들을 보여줍니다. 또한, “Add Field” 버튼을 클릭하면 새로운 폼 필드가 추가됩니다.

이제 Angular에서 동적 폼 배열을 다루는 방법에 대해 기본적인 내용을 배워보았습니다. 여기서 소개된 내용을 바탕으로 실제 앱에서 필요에 맞게 동적 폼을 다룰 수 있을 것입니다.

컴포넌트 생성

동적 폼 배열 생성

템플릿에 FormArray 바인딩

참고 자료

참고 자료