Angular validationForm

validationForm

validationForm은 단순한 변수가 아니라, 폼 전체를 대표하는 상태 관리자입니다.
Angular Reactive Form에서 하나의 폼은 반드시 하나의 FormGroup으로 표현됩니다.

FormGroup
 ├─ FormControl (nickname)
 ├─ FormControl (email)
 └─ FormControl (password)

 

즉, validationForm 하나로 다음을 모두 관리합니다.

• 모든 input의 값
• 각 input의 유효성 상태
• 폼 전체의 유효 여부
• 에러 정보

validationForm.value   // 모든 input 값
validationForm.valid   // 폼 전체 유효 여부
validationForm.errors  // 폼 에러

 

 

---

왜 public validationForm: FormGroup; 형태로 선언할까?

public validationForm: FormGroup;

 

이 코드는 두 가지 의미를 가집니다.

1. 이 컴포넌트는 Reactive Form을 사용한다
2. 템플릿(html)에서 이 폼에 접근할 수 있다

Angular 템플릿에서는 컴포넌트의 public 멤버만 접근할 수 있기 때문에, 폼은 반드시 public으로 선언되어야 합니다.

<form [formGroup]="validationForm">

 

이 바인딩의 기준이 바로 validationForm입니다.

 

---

 

선언과 생성은 다르다 

 

public validationForm: FormGroup;

이 코드는 선언만 한 상태입니다.
아직 실제 FormGroup 객체는 존재하지 않습니다.

 

 

그래서 반드시 생성 단계가 필요합니다.

constructor(private fb: FormBuilder) {
  this.validationForm = this.fb.group({
    nickname: ['', Validators.required],
    email: ['', [Validators.required, Validators.email]],
  });
}

 

이 과정을 거쳐야 비로소 validationForm이 실제 폼으로 동작합니다.

선언만 하고 생성하지 않으면 다음과 같은 에러가 발생합니다.

• formGroup expects a FormGroup instance
• Cannot read properties of undefined

 

---

 

input 연결, 관리

 

Reactive Form에서 input은 FormControl과 1:1로 연결됩니다.

템플릿에서의 연결

<input type="text" formControlName="nickname" />

• formControlName="nickname"
• FormGroup 안의 nickname FormControl과 연결됨

컴포넌트에서의 구조

this.validationForm = this.fb.group({
  nickname: [''],
});

 

이렇게 연결되면 Angular가 자동으로 다음을 처리합니다.

• input 값 변경 → FormControl 값 업데이트
• FormControl 값 변경 → input UI 업데이트

즉, 양방향 동기화가 자동으로 이루어집니다.

 

---

Input 값 저장

모든 input 값은 validationForm.value 안에 객체 형태로 저장됩니다.

{
  nickname: '테스트',
  email: 'test@example.com'
}

 

특정 input 값만 가져오고 싶다면

this.validationForm.get('nickname')?.value

 

이 방식으로 접근합니다.

 

---

 

유효성(validation) 관리

 

각 input은 자신만의 validation 상태를 가집니다.

this.validationForm.get('nickname')?.invalid
this.validationForm.get('nickname')?.errors

예를 들어 required validator가 걸렸다면

this.validationForm.get('nickname')?.errors?.['required']

이 값이 true가 됩니다.

 

 

이를 템플릿에서 이렇게 사용할 수 있습니다.

@if (validationForm.get('nickname')?.errors?.['required']) {
  <p>닉네임은 필수입니다.</p>
}

 

 

---

폼 전체 기준으로 제어하기

폼 전체의 상태도 쉽게 확인할 수 있습니다.

this.validationForm.valid
this.validationForm.invalid

 

 

예를 들어 submit 버튼 제어

<button [disabled]="validationForm.invalid">제출</button>

이렇게 하면 모든 input이 유효할 때만 제출이 가능합니다.