Building our first Reactive Form

In this section, we’ll create our first Reactive Form. More specifically, we’re going to build a CityEditComponent that will give our users the chance to edit an existing city record.

To do that, we’ll do the following:

• Add a reference to the ReactiveFormsModule to our AppModule class
• Create the CityEditComponent TypeScript and template files

Let’s get started.

ReactiveFormsModule

The first thing we have to do to start working with Reactive Forms is to add a reference to the ReactiveFormsModule in the AppModule class.

From Solution Explorer, open the /src/app/app.module.ts file and add the following import statement right after the BrowserModule:

import { ReactiveFormsModule } from '@angular/forms';

As always, remember to also add the ReactiveFormsModule to @NgModule's imports collection.

Now that we’ve added a reference to the ReactiveFormsModule...