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

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


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