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


157

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?


3
Inną kwestią do rozważenia jest forma reaktywna jest synchroniczna, a forma oparta na szablonie jest asynchroniczna. Oba formularze mają swoje słabe i mocne strony, dlatego przed wybraniem formularza do zastosowania w aplikacji należy wziąć pod uwagę kilka rzeczy. złożoność aplikacji itp. Możesz również użyć obu formularzy w aplikacji.
Vijay Singh

Odpowiedzi:


171

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

1
Czy wady testów jednostkowych nadal mają zastosowanie w przypadku formularzy sterowanych szablonem?
niebezpieczeństwo89

@ danger89 Myślę, że tak. Powodem, dla którego testowanie jednostkowe jest problemem w przypadku formularzy opartych na szablonach, jest to, że są to zmiany wartości, a sprawdzanie poprawności jest asynchroniczne, co może powodować ból głowy w przypadku testów jednostkowych.
Alex Lockwood

2
Dodałbym weryfikację formularza do powyższej mieszanki. Szablony są weryfikowane za pomocą dyrektyw, w których reaktywność zależy od funkcji
Kieran

11
co dokładnie oznacza „Obsługuje skomplikowane scenariusze” w odniesieniu do formularzy reaktywnych? pochodzący z AngularJS, udało mi się zbudować złożone formularze, więc trudno mi zobaczyć, jak formularze oparte na szablonach „zawodzą w przypadku złożonych scenariuszy”
jtate

@jtate Zgadzam się z tobą jtate, czy ktoś ma pomysł, który z nich pomaga poprawić wydajność, czas ładowania itp.?
Joel Joseph

24

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


24

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


3

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


0

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

wprowadź opis obrazu tutaj


0

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/

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.