Template Driven Forms Features
[(NgModel)]
syntax)Reactive Forms Features
Here is the summary of comparision between template driven and reactive forms explained by DeborahK (Deborah Kurata) well,
I think that it´s a discussion about code, strategy and user experience.
In summary we change from template-driven approach which is more easy to work with it, to reactive (in model-driven approach) for giving us more control, that results in a better testable form by leveraging a decoupling between the HTML (design/CSS team can work here) and component's business rules (angular/js specialist members) and to improve the user experience with features like reactive transformations, correlated validations and handle complex scenarios as runtime validation rules and dynamic fields duplication.
This article is a good reference about it: Angular 2 Forms - Template Driven and Model Driven Approaches
Reactive forms:
Template-driven forms:
In summaries, if forms are very important for your app, or reactive pattern are used in your app, you should use reactive forms.Otherwise your app have basic and simple requirement for forms such as sign in, you should use template-driven forms.
There is a angular offical link
Easiest way to know the difference between Reactive forms and Template-driven forms
i can say if you want more control and scalability go with Reactive forms
Template Driven Forms :
imported using FormsModule
Forms built with ngModel directive can only be tested in an end to end test because this requires the presence of a DOM
The form value would be available in two different places: the view model ie ngModel
Form validation, as we add more and more validator tags to a field or when we start adding complex cross-field validations the readability of the form decreases
Reactive Forms :
Can generally used for large-scale applications
complex validation logic is actually simpler to implement
imported using ReactiveFormsModule
The form value would be available in two different places: the view model and the FormGroup
Easy to Unit Test : We can do that just by instantiating the class, setting some values in the form controls and perform assertions against the form global valid state and the validity state of each control.
Use of Observables for reactive programming
For example: a password field and a password confirmation field need to be identical
Reactive way : we just need to write a function and plug it into the FormControl
Template-Driven Way : we need to define a directive and somehow pass it the value of the two fields
https://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With