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?
angular
angular2-forms
Gdyrrahitis
quelle
quelle
Antworten:
Funktionen für vorlagengesteuerte Formulare
[(NgModel)]Syntax)Funktionen für reaktive Formulare
quelle
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
quelle
Hier ist die Zusammenfassung des Vergleichs zwischen templatgesteuerten und reaktiven Formen, die von DeborahK (Deborah Kurata) gut erklärt wurde.
quelle
Reaktive Formen:
Vorlagengesteuerte 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
quelle
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
quelle
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/
quelle