Jakie są praktyczne różnice między formularzami opartymi na szablonie a formularzami reaktywnymi?

Czytałem o nowym API Forms w Angular2 i wydaje się, że istnieją dwa podejścia do formularzy, jedno to formularze oparte na szablonach, a drugie to formularze reaktywne lub oparte na modelach.

Chciałbym poznać praktyczną różnicę między nimi, nie różnicę w składni (oczywiście), ale praktyczne zastosowania i które podejście przynosi większe korzyści w różnych scenariuszach. Ponadto, czy wybranie jednego z nich daje lepsze wyniki? A jeśli tak, dlaczego?

Funkcje formularzy opartych na szablonach

• Łatwy w użyciu
• Nadaje się do prostych scenariuszy i kończy się niepowodzeniem w przypadku złożonych scenariuszy
• Podobny do AngularJS
• Dwukierunkowe wiązanie danych (przy użyciu [(NgModel)]składni)
• Minimalny kod komponentu
• Automatyczne śledzenie formularza i jego danych (obsługiwane przez Angular)
• Testy jednostkowe to kolejne wyzwanie

Funkcje formularzy reaktywnych

• Bardziej elastyczny, ale wymaga dużo praktyki
• Obsługuje wszelkie złożone scenariusze
• Nie jest wykonywane żadne powiązanie danych (niezmienny model danych preferowany przez większość programistów)
• Więcej kodu komponentu i mniej znaczników HTML
• Możliwe są transformacje reaktywne, takie jak
  • Obsługa zdarzenia na podstawie czasu odbicia
  • Obsługa zdarzeń, gdy składniki są różne, dopóki nie zostaną zmienione
  • Dynamiczne dodawanie elementów
• Łatwiejsze testowanie jednostkowe

Myślę, że to dyskusja o kodzie , strategii i doświadczeniu użytkownika .

Podsumowując, przechodzimy na podejście oparte na szablonach, które jest łatwiejsze w użyciu, na podejście reaktywne (w podejściu opartym na modelu), które daje nam większą kontrolę , co skutkuje lepszą testowalną formą poprzez wykorzystanie oddzielenia między HTML (projekt / Zespół CSS może tu pracować) i reguł biznesowych komponentu (członkowie specjaliści angular / js) oraz w celu poprawy doświadczenia użytkownika dzięki funkcjom, takim jak transformacje reaktywne, skorelowane walidacje i obsługę złożonych scenariuszy, takich jak reguły walidacji w czasie wykonywania i dynamiczne duplikowanie pól.

Ten artykuł jest dobrą referencją na ten temat: Angular 2 Forms - Template Driven and Model Driven Approaches

Oto podsumowanie porównania między formami opartymi na szablonie a formami reaktywnymi, wyjaśnione dobrze przez DeborahK (Deborah Kurata),

Formularze reaktywne:

• wielokrotnego użytku,
• bardziej wytrzymałe,
• testowalne,
• bardziej skalowalne

Formularze oparte na szablonach:

• łatwe do dodania,
• mniej skalowalne,
• podstawowe wymagania dotyczące formularza

Podsumowując , jeśli formularze są bardzo ważne dla Twojej aplikacji lub w Twojej aplikacji jest używany wzorzec reaktywny, powinieneś używać formularzy reaktywnych.W przeciwnym razie aplikacja ma podstawowe i proste wymagania dotyczące formularzy, takich jak logowanie, należy używać formularzy opartych na szablonach .

Istnieje oficjalne połączenie kątowe

Najłatwiejszy sposób na poznanie różnicy między formularzami reaktywnymi a formularzami opartymi na szablonach

Mogę powiedzieć, że jeśli chcesz mieć większą kontrolę i skalowalność, wybierz formularze reaktywne

Formularze oparte na szablonach:

zaimportowane przy użyciu FormsModule

Formularze zbudowane za pomocą dyrektywy ngModel mogą być testowane tylko w ramach testu end-to-end, ponieważ wymaga to obecności DOM

Wartość formularza byłaby dostępna w dwóch różnych miejscach: model widoku, czyli ngModel

Walidacja formularza, gdy dodajemy coraz więcej tagów walidatora do pola lub gdy zaczynamy dodawać złożone walidacje między polami, czytelność formularza spada

Formularze reaktywne:

Może być ogólnie używany do zastosowań na dużą skalę

złożona logika walidacji jest w rzeczywistości prostsza do wdrożenia

importowane przy użyciu ReactiveFormsModule

Wartość formularza byłaby dostępna w dwóch różnych miejscach: modelu widoku i FormGroup

Łatwy do wykonania test jednostkowy: Możemy to zrobić, po prostu tworząc instancję klasy, ustawiając niektóre wartości w kontrolkach formularza i wykonując asercje względem globalnego stanu prawidłowego formularza i stanu ważności każdej kontrolki.

Wykorzystanie Observables do programowania reaktywnego

Na przykład: pole hasła i pole potwierdzenia hasła muszą być identyczne

Sposób reaktywny: wystarczy napisać funkcję i podłączyć ją do FormControl

Sposób oparty na szablonach: musimy zdefiniować dyrektywę i jakoś przekazać jej wartości dwóch pól

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