Forms Overview

Forms play a significant role in any application. We saw how we could work with forms in Angular. We can use property binding and event handling on form inputs, which gives us control over the input.

This solution works fine for small applications. Angular provides two alternative features for controlling forms and their inputs. There are reactive forms and template forms. It might seem strange that Angular provides two APIs for developing forms, but it’s completely valid to use either one.

Also, you don’t have to use either. You can continue developing forms with property binding and event handling. However, I recommend them because they allow you to control forms more easily.

Reactive forms

The first system for forms is reactive forms. They’re forms we can configure from the component class AKA files that end with .component.ts. It’s an extremely powerful API that we can use to build complex forms.

RxJS observables are also supported with reactive forms. If you’re not interested in using observables, that’s fine. RxJS is entirely optional with reactive forms.

The only problem is that it can be challenging to use. Reactive forms are best suited for when you’re developing complex forms.

Template forms

The other system is called template forms. These are the forms that we can configure from the component’s template file AKA files that end with .component.html. It’s the more straightforward API out of the two. You can use it to build simple forms. However, it’s not as powerful and can be difficult if you want to create a complex form.

Which to use?

Both are viable options. You’ll frequently see either one used in an application. I recommend becoming familiar with both. We’ll be looking at how to use reactive forms first. It’s the most popular out of the two because of how much flexibility and power it provides out of the box.