209

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.

I would like to know the practical difference between the two, not the difference in syntax (obviously) but practical uses and which approach benefits more in different scenarios. Also, is there a performance gain in choosing one over the other? And if yes, why?

isherwood
  • 58,414
  • 16
  • 114
  • 157
gdyrrahitis
  • 5,598
  • 3
  • 23
  • 37
  • 4
    Another point to consider is Reactive form is synchronous and Template driven form is asynchronous. Both forms has their own weaknesses and strengths.So need consider couple of things before choosing which form to use in your application ex. application complexity etc.You can also use both forms in application. – Vijay Singh May 11 '17 at 16:12

6 Answers6

219

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 an event based on a debounce time
    • Handling events when the components are distinct until changed
    • Adding elements dynamically
  • Easier unit testing
sashoalm
  • 75,001
  • 122
  • 434
  • 781
Aravind
  • 40,391
  • 16
  • 91
  • 110
  • 1
    Is the unit testing down side still applicable for Template Driven Forms? – Melroy van den Berg Apr 10 '18 at 23:05
  • 1
    @danger89 I think so. The reason unit testing is a problem for template driven forms is because they are value changes and validity checks are asynchronous, which can cause headaches when it comes to unit testing. – Alex Lockwood May 27 '18 at 20:52
  • 2
    I would add [form validation](https://angular.io/guide/form-validation) into the mix above. Templates are validated via directives where reactive is by function – Kieran Sep 27 '18 at 01:08
  • 22
    what exactly does "Handles any complex scenarios" mean when referring to reactive forms? coming from AngularJS, I've built complex forms just fine, so it's hard for me to see how template driven forms "fail for complex scenarios" – jtate Dec 12 '18 at 15:33
  • @jtate i agree with you jtate , do anyone have any idea on which one helps to improve performance, load time etc? – Joel Joseph Nov 14 '19 at 12:48
  • 3
    I still don't understand why angular give two approach for same thing, it makes angular hard to learn for beginners. – vinesh_dodiya Mar 23 '22 at 07:05
  • @vinesh I think it was mostly driven by a need for unit testing, which is where reactive forms a much better. For beginners, the best advice is probably to start with template forms, and make the switch if & when you need to. – Sean Jun 07 '22 at 06:30
37

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

naveen
  • 53,448
  • 46
  • 161
  • 251
Sajeetharan
  • 216,225
  • 63
  • 350
  • 396
35

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

developer033
  • 24,267
  • 8
  • 82
  • 108
Richard Lee
  • 2,136
  • 2
  • 25
  • 33
8

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

fgul
  • 5,763
  • 2
  • 46
  • 32
7

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

enter image description here

abhinavsinghvirsen
  • 1,853
  • 16
  • 25
  • 4
    can anyone tell me what synchronous and asynchronous form means in terrms of form? – Akash Kumar Aug 05 '20 at 09:24
  • 2
    Reactive forms are synchronous (as you create controls from you code) In reactive forms, you create the entire form control tree in code. You can immediately update a value or drill down through the descendants of the parent form because all controls are always available. – abhinavsinghvirsen Aug 05 '20 at 14:38
  • 2
    template-driven forms are asynchronous (as it delegate task of creation of control) Template-driven forms delegate creation of their form controls to directives. To avoid "changed after checked" errors, these directives take more than one cycle to build the entire control tree. That means you must wait a tick before manipulating any of the controls from within the component class. – abhinavsinghvirsen Aug 05 '20 at 14:39
5

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/

LalithSwarna
  • 101
  • 1
  • 4
  • Is there any preference to which form type is suitable for larger forms, like with 50+ input fields and 5-6 such forms ? – Asish Dec 30 '21 at 11:25