[angular] Angular 폼 동적 추가

26 Dec 2023

angular

다음은 Angular에서 폼 동적 추가를 구현하는 간단한 예제입니다.

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

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['./my-form.component.css']
})
export class MyFormComponent {
  form: FormGroup;

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

  createField(): FormGroup {
    return this.fb.group({
      fieldName: '',
      // 다른 필드 정의
    });
  }

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

  addField() {
    this.formData.push(this.createField());
  }

  removeField(index: number) {
    this.formData.removeAt(index);
  }
}

동적으로 폼 추가하기

<form [formGroup]="form">
  <div formArrayName="fields">
    <div *ngFor="let field of formData.controls; let i = index;">
      <div [formGroupName]="i">
        <input formControlName="fieldName" placeholder="Field Name">
        <!-- 다른 필드 입력 -->
        <button (click)="removeField(i)">Remove</button>
      </div>
    </div>
  </div>
  <button type="button" (click)="addField()">Add Field</button>
</form>

위 예제를 통해 FormArray를 사용하여 Angular에서 동적으로 폼을 추가하는 방법을 보여줬습니다. 사용자가 필요에 따라 입력 필드를 추가하고 삭제할 수 있도록 하는 기능을 갖추게 될 것입니다.

이렇게 Angular에서 폼을 동적으로 추가하는 방법은 유용하고 확장 가능한 기능을 구현하는 데 도움이 됩니다.

이 예제는 Angular 10 버전 기준으로 작성되었습니다. 더 자세한 내용은 Angular 공식 문서를 참고하시기 바랍니다.

목차

FormArray 만들기

동적으로 폼 추가하기