This is the second part of the series on Introduction to Forms in Angular 4. In the first part, we created a form using the template-driven approach. We used directives such as
ngForm to supercharge the form elements. In this tutorial, we will be taking a different approach to building forms—the reactive way.
Reactive forms take a different approach compared to that of the template-driven forms. Here, we create and initialize the form control objects in our component class. They are intermediate objects that hold the state of the form. We will then bind them to the form control elements in the template.
The form control object listens to any change in the input control values, and they are immediately reflected in the object’s state. Since the component has direct access to the data model structure, all changes can be synchronized between the data model, the form control object, and the input control values.
Practically speaking, if we are building a form for updating the user profile, the data model is the user object retrieved from the server. By convention, this is often stored inside the component’s user property (
this.user). The form control object or the form model will be bound to the template’s actual form control elements.
Both these models should have similar structures, even if they are not identical. However, the input values shouldn’t flow into the data model directly. The image describes how the user input from the template makes its way to the form model.
Let’s get started.
You don’t need to have followed part one of this series, for part two to make sense. However, if you are new to forms in Angular, I would highly recommend going through the template-driven strategy. The code for this project is available on my GitHub repository. Make sure that you are on the right branch and then download the zip or, alternatively, clone the repo to see the form in action.
If you prefer to start from scratch instead, make sure that you have Angular CLI installed. Use the
ng command to generate a new project.
$ ng new SignupFormProject
Next, generate a new component for the
SignupForm or create one manually.
ng generate component SignupForm
Replace the contents of app.component.html with this:
Here is the directory structure for the src/ directory. I’ve removed some non-essential files to keep things simple.
. ├── app │ ├── app.component.css │ ├── app.component.html │ ├── app.component.ts │ ├── app.module.ts │ ├── signup-form │ │ ├── signup-form.component.css │ │ ├── signup-form.component.html │ │ └── signup-form.component.ts │ └── User.ts ├── index.html ├── main.ts ├── polyfills.ts ├── styles.css ├── tsconfig.app.json └── typings.d.ts
As you can see, a directory for the
SignupForm component has been created automatically. That’s where most of our code will go. I’ve also created a new
User.ts for storing our User model.
The HTML Template
Before we dive into the actual component template, we need to have an abstract idea of what we are building. So here is the form structure that I have in my mind. The signup form will have several input fields, a select element, and a checkbox element.
Here is the HTML template that we will be using for our registration page.