formArrayName angular formGroup

agnusdei1207·2023년 9월 22일
0
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';

@Component({
  selector: 'app-email-form',
  templateUrl: './email-form.component.html',
})
export class EmailFormComponent {
  emailForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.emailForm = this.formBuilder.group({
      emails: this.formBuilder.array([
        this.createEmailFormGroup()
      ])
    });
  }

  createEmailFormGroup(): FormGroup {
    return this.formBuilder.group({
      email: ['', [Validators.required, Validators.email]]
    });
  }

  addEmail() {
    const emailsArray = this.emailForm.get('emails') as FormArray;
    emailsArray.push(this.createEmailFormGroup());
  }

  removeEmail(index: number) {
    const emailsArray = this.emailForm.get('emails') as FormArray;
    emailsArray.removeAt(index);
  }

  submitForm() {
    if (this.emailForm.valid) {
      console.log(this.emailForm.value);
      // 여기에서 데이터를 서버로 보내거나 처리할 수 있습니다.
    } else {
      // 폼 유효성 검사 오류 처리
    }
  }
}

이제 위 코드를 구체적으로 살펴보겠습니다.

  1. emails FormArray: FormArray를 이용하여 동적 이메일 주소 필드를 관리합니다. 초기에 하나의 폼 그룹을 가지고 시작합니다.

  2. createEmailFormGroup() 함수: 이 함수는 이메일 주소를 입력하기 위한 FormGroup을 생성합니다. 여기서 "email" 필드는 이메일 주소를 입력받는 FormControl입니다. 이 필드는 Validators.requiredValidators.email를 사용하여 필수 필드이면서 올바른 이메일 형식을 가져야 함을 정의합니다.

  3. addEmail() 함수: 이 함수는 "Add Email" 버튼을 클릭할 때 호출되며, FormArray에 새로운 이메일 주소 필드를 추가합니다. createEmailFormGroup() 함수를 사용하여 새로운 FormGroup을 생성하고 FormArray에 추가합니다.

  4. removeEmail(index: number) 함수: 이 함수는 특정 인덱스에 해당하는 이메일 주소 필드를 FormArray에서 제거합니다.

  5. submitForm() 함수: 폼을 제출할 때 호출되며, 폼이 유효한지 확인한 후 데이터를 서버로 보내거나 처리할 수 있습니다.

이제 이 폼을 HTML 템플릿에서 사용하려면 다음과 같이 작성할 수 있습니다:

<form [formGroup]="emailForm" (ngSubmit)="submitForm()">
  <div formArrayName="emails">
    <div *ngFor="let emailGroup of emailForm.get('emails').controls; let i = index">
      <div [formGroupName]="i">
        <input type="email" formControlName="email" placeholder="Email Address">
        <button type="button" (click)="removeEmail(i)">Remove</button>
      </div>
    </div>
  </div>
  <button type="button" (click)="addEmail()">Add Email</button>
  <button type="submit">Submit</button>
</form>

이렇게 하면 사용자가 "Add Email" 버튼을 클릭하여 동적으로 이메일 주소 필드를 추가하고 "Remove" 버튼을 사용하여 필드를 제거할 수 있습니다. 폼의 유효성을 확인하고 제출할 때 데이터를 처리할 수 있습니다.

이 예제에서 FormArray를 사용하여 동적 폼 필드를 관리하는 방법을 보여주었습니다. FormArray를 사용하면 동적 데이터를 다루는 데 유용하며, 폼을 동적으로 확장하거나 축소하는 데 활용할 수 있습니다.

0개의 댓글