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

Question

I have been reading about Angular2 new Forms API and it seems that there are two approaches on forms, one is Template driven forms other is reactive or model-driven forms.

Answer 1

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

Answer 2

I think that it´s a discussion about code, strategy and user experience.

In summary we change for 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

Answer 3

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/

Answer 4

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

Answer 5

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
• Easier unit testing

Answer 6

Here is the summary of comparision between template driven and reactive forms explained by DeborahK (Deborah Kurata) well,