What are the practical differences between template-driven and reactive forms?

Template Driven Forms Features

Easy to use

Suitable for simple scenarios and fails for complex scenarios

Similar to AngularJS

Two way data binding(using [(NgModel)] syntax)

Minimal component code

Automatic track of the form and its data(handled by Angular)

Unit testing is another challenge

Reactive Forms Features

More flexible, but needs a lot of practice

Handles any complex scenarios

No data binding is done (immutable data model preferred by most developers)

More component code and less HTML markup

Reactive transformations can be made possible such as Handling a event based on a debounce time Handling events when the components are distinct until changed Adding elements dynamically

Handling a event based on a debounce time

Handling events when the components are distinct until changed

Adding elements dynamically

Easier unit testing

---

https://i.stack.imgur.com/HZQlS.png

---

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:

reusable,

more robust,

testable,

more scalable

Template-driven forms:

easy to add,

less scalable,

basic form requirements

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

https://i.stack.imgur.com/CA4Ge.png

---

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/

---