Forms are critical to any modern front-end application, and they’re a feature that we use every day, even if don’t realize it. Forms are required for securely logging in a user to the app, searching for all the available hotels in a particular city, booking a cab, building a to-do list, and doing tons of other things that we are used to. Some forms have just a couple of input fields, whereas other forms could have an array of fields that stretch to a couple of pages or tabs.
In this tutorial, we will be talking about different strategies available for developing forms in Angular. Irrespective of the strategy that you choose, here are the things that a form library should cover:
- Support two-way binding so that the input control values are in sync with the component state.
- Keep track of the form state and use visual cues to let the user know whether the current state is valid or not. For instance, if the username has invalid characters, a red border should appear around the input field for the username.
- Have a mechanism to display validation errors properly.
- Enable or disable certain parts of the form unless some validation criteria are met.
Introduction to Forms in Angular
Angular, being a full-fledged front-end framework, has its own set of libraries for building complex forms. The latest version of Angular has two powerful form-building strategies. They are:
- template-driven forms
- model-driven or reactive forms
Both the technologies belong to the
@angular/forms library and are based on the same form control classes. However, they differ remarkably in their philosophy, programming style, and technique. Choosing one over the other depends on your personal taste and also on the complexity of the form that you are trying to create. In my opinion, you should try both the approaches first and then choose one that fits your style and the project at hand.
The first part of the tutorial will cover template-driven forms with a practical example: building a signup form with validation for all form fields. In the second part of this tutorial, we will retrace the steps to create the same form using a model-driven approach instead.
The template-driven approach is a strategy that was borrowed from the AngularJS era. In my opinion, it is the most straightforward method for building forms. How does it work? We will be using some Angular directives.
Directives allow you to attach behavior to elements in the DOM.
— Angular Documentation
Angular provides form-specific directives that you can use to bind the form input data and the model. The form-specific directives add extra functionality and behavior to a plain HTML form. The end result is that the template takes care of binding values with the model and form validation.
In this tutorial, we will be using template-driven forms to create the signup page of an application. The form will cover the most common form elements and different validation checks on these form elements. Here are the steps that you will follow in this tutorial.
- Add FormsModule to
- Create a class for the User model.
- Create initial components and layout for the signup form.
- Use Angular form directives like
- Add validation using built-in validators.
- Display validation errors meaningfully.
- Handle form submission using
Let’s get started.
The code for this project is available on my GitHub repo. Download the zip or clone the repo to see it 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.
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.