Angular Reactive Form에서 FormControl 값 접근 방식 3가지 비교

반응형

Angular로 폼을 다루다 보면, FormControl의 값을 가져오는 다양한 방법들을 접하게 됩니다. 대표적으로 아래 3가지 방식이 있습니다.

this.form.controls['empNo'].value
this.form.value.empNo
this.form.get('empNo').value

 

겉보기엔 비슷해 보이지만, 내부 구조나 사용 목적에 따라 적절한 방식이 다릅니다. 본 포스팅에서는 각 방법의 차이점과 언제 어떤 방식을 사용하는 게 좋은지 예제를 통해 정리해 보겠습니다.

---

1. this.form.controls ['empNo']. value

✅ 설명

controls는 FormGroup이 가지고 있는 모든 FormControl들의 집합입니다.
해당 코드는 'empNo'라는 이름의 FormControl에 직접 접근해서 값을 가져오는 방식입니다.

 

✅ 예시

const empNo = this.form.controls['empNo'].value;

 

✅ 사용 시점

• FormControl을 개별적으로 조작할 때 적합합니다.
• 예를 들어 특정 컨트롤만 disabled 시키거나, 특정 조건에 따라 값을 바꾸고자 할 때 사용합니다.

if (this.form.controls['empNo'].value === '') {
  this.form.controls['empNo'].disable();
}

---

2. this.form.value.empNo

✅ 설명

value는 FormGroup의 전체 값을 하나의 객체로 가져옵니다.
즉, 모든 FormControl의 값을 한 번에 조회할 수 있고, 특정 key로 접근할 수 있습니다.

 

✅ 예시

const empNo = this.form.value.empNo;

 

✅ 사용 시점

• 폼 전체의 값이 필요한 경우 유용합니다.
• 예를 들어 API에 폼 전체 데이터를 넘길 때, 또는 값 비교나 저장 로직에 활용할 수 있습니다.

const formData = this.form.value;
this.http.post('/api/submit', formData).subscribe();

 

⚠️ 주의

• disabled 된 컨트롤은 this.form.value에 포함되지 않습니다.
• 값만 있고 control 객체에 접근할 수 없기 때문에, 상태 변경은 어렵습니다.

---

3. this.form.get('empNo'). value

✅ 설명

. get() 메서드는 dot notation을 지원하는 방식으로, 중첩된 FormGroup이나 FormArray 구조에서도 유용하게 사용됩니다.

 

✅ 예시

const empNo = this.form.get('empNo').value;

 

✅ 사용 시점

• 중첩된 구조의 폼에서 특정 값을 가져올 때 가장 추천되는 방식입니다.
• 코드 가독성도 높고, IDE의 자동완성 기능도 잘 작동합니다.

const city = this.form.get('address.city').value;

 

---

 

정리: 언제 어떤 걸 써야 할까?

방식 특징 적합한 상황

this.form.controls['empNo'].value	컨트롤 객체 직접 접근	상태 제어, 유효성 검사 등
this.form.value.empNo	전체 값을 객체로 반환	API 전송, 값 저장 등
this.form.get('empNo').value	dot notation 가능	중첩 구조 접근, 가독성 필요 시

---

마무리

Angular Reactive Form은 유연하면서도 구조화된 폼 제어를 제공합니다. 세 가지 접근 방식 모두 목적과 상황에 따라 적절히 사용한다면, 보다 안정적인 폼 처리 코드를 작성할 수 있습니다.