Angular forms control issue

Angular form control methods

Angular 프로젝트 중 간단하지만 무의식적으로 지나가면서 개발하여 나중에 이슈가 생긴 문제를 적어보겠다. 어떤 데이터를 입력받기위한 formControl를 만들고 초기값을 세팅해주는 과정에서 세팅이 안되는 현상 발견..

<원인 분석>

formControl 세팅과정 혹은 초기값 세팅과정에는 문제가 없었다..

알고봤더니, 기존 코드에 Reactive Forms 형태로 개발되어있었고,, 추가적으로 Template-driven Forms 형태로 개발은 한것..!

Reactive Forms는 보통 ts 파일에서 formControlName 디렉티브로 설정하며, FormGroup, FormControl과 동기화하여 입력값을 컨트롤한다.
(valueChanges 이벤트를 통해 값의 변화를 컨트롤)
반면, Template-driven Forms는 양방향 바인딩 방식으로,
우리가 잘아는 ngModel 디렉티브로 제어하며, [(ngModel)]을 통해 html에 직접 바인딩이 되는 형식이다.
(ngModelChange 이벤트를 통해 값의 변화를 컨트롤)

<해결 방안>

Angular에서 모두 지원하는 방식이지만, 두가지 방식을 혼합하여 사용하면 Angular 입장에서 폼 모델을 동기화하는데 혼란이 있을 수 있다는것..!

기본적으로 통일된 방식으로 개발되는것이 중요하다는 것을 다시한번 느꼈다.