Angular 2 Reactive Forms vs Template Forms

Question

We are starting a new Angular 2 project and are considering whether to use Reactive Forms or Template Forms. Background reading here: https://angular.io/guide/reactive-forms

As far as I can tell, the biggest advantage of Reactive Forms is that they're synchronous, but we have simple forms and I don't think asynchronicity will cause us issues. There seems to be much more overhead with Reactive, on the surface more code to do the same things.

Can someone provide a solid use case where i would use Reactive over the simpler Template Forms?

Answer 1

This is a slide from my course on Forms in Pluralsight. Some of these points may be arguable, but I worked with the person from the Angular team that developed Forms to put together this list.

Answer 2

The advantage of template driven design is its simplicity. There will be not much code in the controller. Most logic happens in the template. This is suitable for simple forms which do not need much logic behind the html-code.

But each form has a state that can be updated by many different interactions and it's up to the application developer to manage that state and prevent it from getting corrupted. This can get hard to do for very large forms and can introduce bugs.

On the other hand, if more logic is needed, there is often also a need for testing. Then the reactive model driven design offers more. We can unit-test the form validation logic. We can do that by instantiating the class, setting some values in the form controls and perform tests. For complex software this is absolutely needed for design and maintainability. The disadvantage of reactive model driven design is its complexity.

There is also a way of mixing both design-types, but that would be having the disadvantages of both types.

You can find this explained with simple example code for both ways here: Introduction to Angular Forms - Template Driven vs Model Driven or Reactive Forms