[angular] Angular 폼 동적 입력 필드

26 Dec 2023

angular

Angular를 사용하여 동적 입력 필드를 가진 폼을 구현하는 것은 매우 일반적입니다. 사용자가 필요에 따라 입력 필드를 추가하거나 제거할 수 있는 폼은 많은 웹 애플리케이션에서 사용됩니다. Angular는 이러한 동적 폼을 쉽게 처리할 수 있는 기능을 제공합니다.

이 블로그에서는 Angular 폼에서 동적 입력 필드를 다루는 방법에 대해 살펴볼 것입니다.

폼 모듈 추가

먼저, 동적 입력 필드를 사용하기 위해 Angular 폼 모듈을 추가해야 합니다. app.module.ts 파일을 열고 @angular/forms 모듈을 import 합니다.

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    FormsModule,
    ReactiveFormsModule
  ]
})
export class YourModule { }

동적 입력 필드 추가

동적 입력 필드를 추가하기 위해 FormArray를 사용할 수 있습니다. 이를 사용하여 폼 컨트롤을 배열로 유지하고 필요할 때마다 새로운 폼 컨트롤을 추가할 수 있습니다.

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

export class YourComponent {
  form: FormGroup;

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

  createItem(): FormGroup {
    return this.fb.group({
      // 폼 컨트롤 정의
    });
  }

  addItem() {
    const dynamicFields = this.form.get('dynamicFields') as FormArray;
    dynamicFields.push(this.createItem());
  }

  removeItem(index: number) {
    const dynamicFields = this.form.get('dynamicFields') as FormArray;
    dynamicFields.removeAt(index);
  }
}

위 예제에서 createItem() 메서드는 새로운 폼 컨트롤을 만들고 그룹으로 반환합니다. addItem()과 removeItem() 메서드는 각각 새로운 필드를 추가하거나 제거합니다.

HTML 템플릿

이제 HTML 템플릿에서 동적 입력 필드를 표시할 수 있습니다.

<form [formGroup]="form">
  <div formArrayName="dynamicFields">
    <div *ngFor="let field of form.get('dynamicFields').controls; let i = index;">
      <div [formGroupName]="i">
        <!-- 필드 입력 -->
      </div>
      <button type="button" (click)="removeItem(i)">필드 제거</button>
    </div>
    <button type="button" (click)="addItem()">필드 추가</button>
  </div>
</form>

formArrayName 및 formGroupName을 사용하여 동적 입력 필드를 렌더링하고 추가/제거 버튼을 표시합니다.

이제 Angular를 사용하여 동적 입력 필드를 가진 폼을 만드는 방법에 대해 알아보았습니다. 이를 통해 사용자 경험을 향상시키고 폼의 유연성을 높일 수 있습니다.

더 많은 정보를 원하시면 Angular 공식 문서를 참조하세요.

Happy coding! 🚀