04 리액티브 폼(Reactive Forms) 02

템플릿 기반 폼

템플릿 가이드에 소개된 템플릿 기반 폼은 완전히 다른 접근 방식을 취합니다.

ngModel과 같은 디렉티브를 사용하여 컴포넌트 템플릿에 HTML 폼컨트롤 (예 : <input> 및 <select>)을 배치하고 컴포넌트의 데이터 모델 프로퍼티에 바인딩합니다.

Angular 폼 컨트롤 개체는 만들지 마세요. Angular디렉티브가 데이터 바인딩의 정보를 사용하여 디렉티브를 만듭니다. 직접 데이터 값을 입력하거나, 겨져오지 마십시오. Angular가 ngModel을 사용하여 처리가 가능합니다. Angular는 변경될 수 있는 사용자 변경으로 인한 데이터 모델을 업데이트합니다.

이러한 이유로 ngModel 디렉티브는 ReactiveFormsModule의 일부가 아닙니다.

이는 컴포넌트 클래스에서 적은 코딩을 의미하지만, 템플릿 기반 양식은 비동기 적이기 때문에 보다 고급 시나리오에서 개발을 복잡하게 만들 수 있습니다.

 

비동기 대 동기화

리액티브 폼은 동기식입니다. 템플릿 기반 폼은 비동기식입니다. 이것이 중요한 다른점 입니다.

리액티브 폼에서는 전체 폼 컨트롤 트리를 코드로 작성합니다. 당신은 모든 컨트롤을 항상 사용할 수 있으므로 즉시 부모 폼의 자손을 통해 값을 업데이트하거나 드릴 다운 할 수 있습니다.

템플릿 기반 폼은 폼컨트롤 작성을 디렉티브에 위임합니다. "checked after changed"오류를 피하기 위해 이 디렉티브 전체 제어 트리를 작성하는데 두 번 이상 걸립니다. 즉, 컴포넌트 클래스 내에서 컨트롤을 조작하기 전에 잠시 기다려야합니다.

예를 들어 폼 컨트롤에 @ViewChild (NgForm) 쿼리를 삽입하고 ngAfterViewInit 라이프 사이클 후크에서 검사하면 자식이 없음을 알게됩니다. 컨트롤에서 값을 추출하거나, 유효성을 테스트하거나, 새 값으로 설정하려면 먼저 setTimeout을 사용하여 잠시 기다려야합니다.

템플릿 기반 양식의 비동기는 또한 단위 테스트를 복잡하게 만듭니다. 테스트 블록을 async() 또는 fakeAsync()로 래핑하여 아직 없는 폼의 값을 찾지 않아야합니다. 리액티브 폼을 사용하면 원하는 모든 것을 사용할 수 있습니다.

 

리액티브와 템플릿 기반 중 어느것이 더 좋을까요?

어느쪽이 더 좋다고할 수 없습니다. 두 가지 아키텍처 패러다임은 서로 다른 장단점을 가지고 있습니다. 자신에게 가장 적합한 방법을 선택하십시오. 동일한 응용프로그램에서 둘 다 사용할 수도 있습니다.

이 리액티브폼 가이드의 균형은 리애티브 패러다임을 탐색하고 리액티브 기술에만 집중합니다. 템플릿 기반 폼에 대한 자세한 내용은 폼 안내서를 참조하십시오.

다음 섹션에서는 리액티브폼 시연를 위한 프로젝트를 설정합니다. 그런 다음 Angular 폼 클래스와 이를 리액티브 폼으로 사용하는 방법에 대해 배웁니다.