개발/Angular

Angular Reactive Form에서 this.form.value.empNo= this.empNo가 반영되지 않았던 이유

뇽.뇽 2025. 5. 9. 15:26
반응형
반응형

Angular로 개발하다 보면 **Reactive Form(FormGroup)**을 통해 데이터 바인딩을 자주 사용하게 됩니다. 그런데 최근 작업 중에 아래와 같은 현상을 겪었습니다.

this.form.value.empNo= this.empNo
이렇게 작성했는데 form의 값이 실제로 반영되지 않았던 것입니다.

 

직접 값을 할당했는데 왜 안 바뀌는 걸까요?

 

문제 상황

폼 그룹을 아래와 같이 구성했습니다:

this.form = this.fb.group({
  empNo: [''],
  empName: [''],
});

 

그리고 특정 조건에서 docId를 업데이트하려고 했습니다:

this.form.value.empNo = this.empNo;

 

하지만 console.log(this.form.value.empNo)를 찍어보면 여전히 빈 문자열이거나 기존 값이 유지됩니다. 처음엔 버그인가 싶었지만, Angular의 FormGroup 구조를 다시 살펴보면서 원인을 이해할 수 있었습니다.

 

원인:. value는 단순 참조 객체일 뿐

this.form.value는 단순히 현재 폼의 값을 담은 복사본 객체입니다. 즉, 이 객체를 수정하더라도 Angular 내부의 실제 FormControl에는 영향을 주지 않습니다.

// 이것은 FormControl에 영향을 주지 않는다
this.form.value.empNo = this.empNo;

 

Angular에서는 FormControl 값 변경 시 반드시 setValue()나 patchValue()와 같은 메서드를 사용해야만 변경 사항이 반영됩니다.

 

해결 방법: patchValue() 사용

값을 올바르게 반영하려면 다음과 같이 작성해야 합니다.

this.form.get('empNo')?.patchValue(this.empNo);

 

또는 여러 값을 한 번에 업데이트하려면:

this.form.patchValue({
  empNo: this.empNo,
});

 

이 방식은 Angular의 폼 상태 관리 로직과 연동되어 값 변경을 올바르게 반영하며, 필요시 상태 변경 감지(change detection)도 함께 이루어집니다.

 

참고: setValue()와 patchValue()의 차이

메서드 특징

setValue() 모든 필드에 대해 값을 지정해야 함 (엄격함)
patchValue() 일부 필드만 업데이트 가능 (유연함)

 

실무에서는 대부분 patchValue()를 더 자주 사용하게 됩니다.

마무리

처음엔 단순한 할당처럼 보이지만, Angular Reactive Form에서는 반드시 patchValue() 또는 setValue()를 사용해야 값이 반영됩니다. 이 구조를 이해하고 나면 양방향 바인딩이 어떻게 작동하는지도 자연스럽게 익힐 수 있습니다.

비슷한 상황을 겪고 있는 분들께 도움이 되었길 바랍니다.

반응형