Create Reactive Add Client Form for Application

So, how do Reactive forms differ from template-driven forms? As we’ve seen, the template-driven form is closely bound to its model. The search form in the previous lesson had a simple model of a string property, and as soon as we submit the form, that property is set. Reactive forms differ from template forms through their use of observables to stream form data to the model, while the template form is bound directly to the form.

In order to show the differences between the two approaches, it’s best to create a Reactive form so that we can look at the two side-by-side. Let’s start by creating a new form for our application.

Create client-form

The form we’re going to create is our client-form, where the user will enter the contact details of the new client they are adding to the Client Contacts Manager application.

Step 1: Create a client-form component

The first thing we need to do is create a component that will contain this form. This component will be within our clients folder of the application and not in a separate folder like the Search form is.

Within the terminal, let’s navigate to the client folder and run the following command:

ng generate component client-form

This will create our new component, and it will be ready for the new form to be built.

Step 2: Update app.module.ts

Before we start building out the HTML of the form, we need to do two more things. First, we need to add a new module to our app.module.ts file. This new module is called ReactiveFormsModule.

In the ...