템플릿 기반 양식과 반응 형 양식의 실제 차이점은 무엇입니까?

Angular2의 새로운 Forms API에 대해 읽었으며 양식에 두 가지 접근 방식이있는 것 같습니다. 하나는 템플릿 기반 양식이고 다른 하나는 반응 형 또는 모델 기반 양식입니다.

구문의 차이 (명백하게)가 아니라 실용적인 용도와 다른 시나리오에서 더 많은 이점이있는 두 가지의 실제 차이점을 알고 싶습니다. 또한 하나를 선택하면 성능이 향상됩니까? 그렇다면, 왜?

템플릿 기반 양식 기능

• 사용하기 쉬운
• 간단한 시나리오에 적합하고 복잡한 시나리오에 실패
• AngularJS와 비슷한
• 양방향 데이터 바인딩 ( [(NgModel)]구문 사용 )
• 최소 구성 요소 코드
• 양식 및 데이터 자동 추적 (Angular에서 처리)
• 단위 테스트는 또 다른 도전

반응성 양식 기능

• 더 유연하지만 많은 연습이 필요합니다
• 복잡한 시나리오를 처리
• 데이터 바인딩이 수행되지 않습니다 (대부분의 개발자가 선호하는 불변 데이터 모델)
• 더 많은 구성 요소 코드와 더 적은 HTML 마크 업
• 다음과 같은 반응성 변환이 가능합니다.
  • 디 바운스 시간을 기준으로 이벤트 처리
  • 변경 될 때까지 구성 요소가 다른 경우 이벤트 처리
  • 동적으로 요소 추가
• 보다 쉬운 단위 테스트

코드 , 전략 및 사용자 경험 에 대한 토론이라고 생각합니다 .

요약하면 우리는 변하지 템플릿 기반의 접근 방식에 더 쉽게 작업을 위해, 그것으로 반응성 우리에게주는 (모델 중심의 접근 방식에) 더 제어 되는 HTML 사이의 디커플링을 활용하여 더 나은 검증 가능한 형태로 그 결과 (설계 / CSS 팀은 여기에서 작업 할 수 있으며 컴포넌트의 비즈니스 규칙 (각도 / js 전문가 멤버)과 반응 변환, 상관 유효성 검증과 같은 기능으로 사용자 경험 을 개선하고 런타임 유효성 검증 규칙 및 동적 필드 복제와 같은 복잡한 시나리오 를 처리 할 수 있습니다.

이 기사는 그것에 대한 좋은 참고 자료입니다 : Angular 2 Forms-Template Driven and Model Driven Approaches

다음은 DeborahK (Deborah Kurata)가 잘 설명하는 템플릿 기반 양식과 반응 형 양식의 비교를 요약 한 것입니다.

반응성 양식 :

• 재사용 가능
• 더 강력하고
• 테스트 가능
• 더 확장 가능한

템플릿 기반 양식 :

• 추가하기 쉽고
• 확장 성이 떨어지고
• 기본 양식 요구 사항

요약 하면, 앱에 양식이 매우 중요하거나 앱에 반응 패턴이 사용되는 경우 반응 형 양식 을 사용해야합니다. 그렇지 않으면 앱에 로그인과 같은 양식에 대한 기본적이고 간단한 요구 사항이있는 경우 템플릿 기반 양식을 사용해야 합니다 .

각도 공식 링크가 있습니다

반응 형 양식과 템플릿 기반 양식의 차이점을 가장 쉽게 알 수있는 방법

더 많은 제어 및 확장 성을 원한다면 반응성 양식으로 이동하십시오.

템플릿 기반 양식 :

FormsModule을 사용하여 가져 오기

ngModel 지시문으로 작성된 양식은 DOM이 있어야하기 때문에 엔드 투 엔드 테스트에서만 테스트 할 수 있습니다.

양식 값은 두 가지 다른 위치에서 사용할 수 있습니다. 뷰 모델, 즉 ngModel

필드에 점점 더 많은 유효성 검사기 태그를 추가하거나 복잡한 교차 필드 유효성 검사를 시작하면 양식의 가독성이 감소합니다.

반응성 양식 :

대규모 응용 분야에 일반적으로 사용 가능

복잡한 검증 로직은 실제로 구현하기가 더 간단합니다.

ReactiveFormsModule을 사용하여 가져 오기

양식 값은 뷰 모델과 FormGroup의 두 가지 다른 위치에서 사용 가능합니다.

손쉬운 단위 테스트 : 클래스를 인스턴스화하고 폼 컨트롤에서 일부 값을 설정하고 폼 전역 유효 상태 및 각 컨트롤의 유효성 상태에 대해 어설 션을 수행하기 만하면됩니다.

반응 형 프로그래밍에 Observables 사용

예를 들어 , 비밀번호 필드와 비밀번호 확인 필드는 동일해야합니다.

반응 방식 : 함수를 작성하고 FormControl에 연결하면됩니다.

템플릿 중심 방식 : 지시어를 정의하고 어떻게 든 두 필드의 값을 전달해야합니다.

https://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/