Was sind die praktischen Unterschiede zwischen vorlagengesteuerten und reaktiven Formen?

Ich habe über Angular2 New Forms API gelesen und es scheint, dass es zwei Ansätze für Formulare gibt, einen vorlagengesteuerten Formularen, einen reaktiven oder modellgesteuerten Formularen.

Ich würde gerne den praktischen Unterschied zwischen den beiden kennen, nicht den Unterschied in der Syntax (offensichtlich), sondern die praktischen Verwendungen und welchen Ansatz in verschiedenen Szenarien mehr Vorteile bringt. Gibt es auch einen Leistungsgewinn bei der Auswahl einer über die andere? Und wenn ja, warum?

Funktionen für vorlagengesteuerte Formulare

• Einfach zu verwenden
• Geeignet für einfache Szenarien und fehlgeschlagen für komplexe Szenarien
• Ähnlich wie AngularJS
• Zweiwege-Datenbindung (unter Verwendung der [(NgModel)]Syntax)
• Minimaler Komponentencode
• Automatische Verfolgung des Formulars und seiner Daten (von Angular verarbeitet)
• Unit-Tests sind eine weitere Herausforderung

Funktionen für reaktive Formulare

• Flexibler, erfordert aber viel Übung
• Behandelt alle komplexen Szenarien
• Es erfolgt keine Datenbindung (unveränderliches Datenmodell wird von den meisten Entwicklern bevorzugt)
• Mehr Komponentencode und weniger HTML-Markup
• Reaktive Transformationen können ermöglicht werden, wie z
  • Behandlung eines Ereignisses basierend auf einer Entprellzeit
  • Behandeln von Ereignissen, wenn die Komponenten bis zur Änderung unterschiedlich sind
  • Elemente dynamisch hinzufügen
• Einfachere Unit-Tests

Ich denke, dass es eine Diskussion über Code , Strategie und Benutzererfahrung ist .

Zusammenfassend lässt sich sagen, dass wir für einen vorlagengesteuerten Ansatz, der einfacher zu handhaben ist, zu einem reaktiven (im modellgesteuerten Ansatz) wechseln, um uns mehr Kontrolle zu geben , was zu einer besser testbaren Form führt, indem eine Entkopplung zwischen dem HTML (design /) genutzt wird. Das CSS-Team kann hier arbeiten) und die Geschäftsregeln der Komponente (Angular / JS-Spezialisten) und die Benutzererfahrung mit Funktionen wie reaktiven Transformationen, korrelierten Validierungen verbessern und komplexe Szenarien wie Laufzeitvalidierungsregeln und Duplizieren dynamischer Felder behandeln.

Dieser Artikel ist eine gute Referenz dazu: Angular 2 Forms - Template Driven und Model Driven Approaches

Hier ist die Zusammenfassung des Vergleichs zwischen templatgesteuerten und reaktiven Formen, die von DeborahK (Deborah Kurata) gut erklärt wurde.

Reaktive Formen:

• wiederverwendbar,
• robuster,
• testbar,
• skalierbarer

Vorlagengesteuerte Formulare:

• einfach hinzuzufügen,
• weniger skalierbar,
• Grundvoraussetzungen für Formulare

In Zusammenfassungen sollten Sie reaktive Formulare verwenden, wenn Formulare für Ihre App sehr wichtig sind oder reaktive Muster in Ihrer App verwendet werden. Andernfalls sollte Ihre App grundlegende und einfache Anforderungen für Formulare wie die Anmeldung stellen. Sie sollten vorlagengesteuerte Formulare verwenden .

Es gibt eine eckige offizielle Verbindung

Der einfachste Weg, den Unterschied zwischen reaktiven und vorlagengesteuerten Formularen zu erkennen

Ich kann sagen, wenn Sie mehr Kontrolle und Skalierbarkeit wünschen, gehen Sie mit reaktiven Formularen

Vorlagengesteuerte Formulare:

mit FormsModule importiert

Mit der ngModel-Direktive erstellte Formulare können nur in einem End-to-End-Test getestet werden, da hierfür ein DOM erforderlich ist

Der Formularwert wäre an zwei verschiedenen Stellen verfügbar: im Ansichtsmodell, dh ngModel

Formularvalidierung Wenn wir einem Feld immer mehr Validator-Tags hinzufügen oder wenn wir komplexe feldübergreifende Validierungen hinzufügen, nimmt die Lesbarkeit des Formulars ab

Reaktive Formen:

Kann im Allgemeinen für Großanwendungen verwendet werden

Die komplexe Validierungslogik ist tatsächlich einfacher zu implementieren

mit ReactiveFormsModule importiert

Der Formularwert wäre an zwei verschiedenen Stellen verfügbar: im Ansichtsmodell und in der FormGroup

Einfacher Komponententest: Wir können dies tun, indem wir einfach die Klasse instanziieren, einige Werte in den Formularsteuerelementen festlegen und Zusicherungen für den globalen Gültigkeitsstatus des Formulars und den Gültigkeitsstatus jedes Steuerelements durchführen.

Verwendung von Observables zur reaktiven Programmierung

Beispiel: Ein Kennwortfeld und ein Kennwortbestätigungsfeld müssen identisch sein

Reaktiver Weg: Wir müssen nur eine Funktion schreiben und in das FormControl einbinden

Template-Driven Way: Wir müssen eine Direktive definieren und ihr irgendwie den Wert der beiden Felder übergeben

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