Creating your first Template-Driven form with validation

Let's start getting familiar with Angular forms in this recipe. In this one, you'll learn about the basic concepts of template-driven forms and will create a basic Angular form using the template-driven forms API.

Getting ready

The app that we are going to work with resides in start/apps/chapter08/ng-tdf inside the cloned repository:

1. Open the code repository in your Code Editor.
2. Open the terminal, navigate to the code repository directory and run npm run serve ng-tdf to serve the project

This should open the app in a new browser tab. And you should see the following:

Figure 8.1 – ng-tdf app running on http://localhost:4200

How to do it…

We have an Angular app that already has a bunch of components and some UI setup. need to implement the functionality to add a new version to the logs. We’ll use a template-driven form to allow the user to pick an app and submit a release version. Let's get...

Creating your first Reactive Form with validation

You've learned about template-driven forms in the previous recipe and are now confident in building Angular apps with them. Now guess what? Reactive forms are even better. Many known engineers and businesses in the Angular community recommend using Reactive forms. The reason is their ease of use when it comes to building complex forms. In this recipe, you'll build your first Reactive form and will learn its basic usage.

Getting ready

The app that we are going to work with resides in start/apps/chapter08/ng-reactive-forms inside the cloned repository:

1. Open the code repository in your Code Editor.
2. Open the terminal, navigate to the code repository directory and run npm run serve ng-reactive-forms to serve the project

This should open the app in a new browser tab. And you should see the following:

Figure 8.4 – ng-reactive-forms app running on http://localhost:4200

Now that we have the app running locally, let's...

Testing forms in Angular

To make sure we build robust and bug-free forms for end users, it is a really good idea to have tests relating to your forms. It makes the code more resilient and less prone to errors. In this recipe, you'll learn how to test your template-driven forms using unit tests.

Getting ready

The app that we are going to work with resides in start/apps/chapter08/ng-testing-forms inside the cloned repository:

1. Open the code repository in your Code Editor.
2. Open the terminal, navigate to the code repository directory and run npm run serve ng-testing-forms with-server to serve the project along with the backend server

This should open the app in a new browser tab. And you should see the following:

Figure 8.6 – ng-testing-forms app running on http://localhost:4200

Now that we have the app running locally, let's see the steps involved in this recipe in the next section.

How to do it…

We have an app that contains three different components. The first...

Server side validation using asynchronous validator functions

Form validations are pretty straightforward in Angular, the reason being the super-awesome validators that Angular provides out of the box. These validators are synchronous, meaning that as soon as you change the input, the validators kick in and provide you with information about the validity of the values right away. But sometimes, you might rely on some validations from a backend API, or have some asynchronous logic that you need to execute to validate the form value. These situations would require something called asynchronous validators. In this recipe, you're going to create your first asynchronous validator.

Getting ready

The app that we are going to work with resides in start/apps/chapter08/ng-rf-async-validator inside the cloned repository:

1. Open the code repository in your Code Editor.
2. Open the terminal, navigate to the code repository directory and run npm run serve ng-rf-async-validator with-server to serve...

Implementing Complex Forms with Reactive Form Arrays

This is definitely one of the most requested from the readers of the first edition of the Angular Cookbook. In this recipe, we’ll work with Reactive Forms and specifically, the FormArray class from Reactive Forms. We’re going to implement a complex form which has a list of projects that can be submitted with the forms. The user will be able to add as many projects as they want and will be able to remove the ones they don’t want.

Getting ready

The app that we are going to work with resides in start/apps/chapter08/ng-form-arrays inside the cloned repository:

1. Open the code repository in your Code Editor.
2. Open the terminal, navigate to the code repository directory and run npm run serve ng-form-arrays to serve the project

This should open the app in a new browser tab. And you should see the following:

Figure 8.13 – Reactive Form Arrays app running on http://localhost:4200

Now that we have the app running...

Writing your own custom form control using ControlValueAccessor

Angular forms are great. While they support the default HTML tags like input, textarea etc., sometimes, you would want to define your own components that take a value from the user. It would be great if the variables of those inputs were a part of the Angular form you're using already.In this recipe, you'll learn how to create your own custom Form Control using the ControlValueAccessor API, so you can use the Form Control with both Template Driven forms and Reactive Forms.

Getting ready

The app that we are going to work with resides in start/apps/chapter08/ng-form-cva inside the cloned repository:

1. Open the code repository in your Code Editor.
2. Open the terminal, navigate to the code repository directory and run npm run serve ng-form-cva to serve the project

This should open the app in a new browser tab. And you should see the following:

Figure 8.17 – Custom form control app running on http://localhost...

Using the CDK Drag and Drop API to move items from one list to another

Have you ever used the Trello board app, or maybe other apps that also allow you to drag and drop list items from one list to another? Well, you can do this easily using the Angular CDK, and in this recipe, you’ll learn about using the Angular CDK Drag and Drop API to move items from one list to another. You’ll also learn how to reorder lists.

Getting ready

The app that we are going to work with resides in start/apps/chapter09/ng-cdk-drag-drop inside the cloned repository:

1. Open the code repository in your code editor.
2. Open the terminal, navigate to the code repository directory, and run the following command to serve the project:

   npm run serve ng-cdk-drag-drop to serve the project.
   

   This should open the app in a new browser tab, and you should see the following:

   

   Figure 9.12: The ng-cdk-drag-drop app running on http://localhost:4200

Now...

Creating a multi-step game with the CDK Stepper API

If you try finding examples of the CDK Stepper API over the internet, you’ll find a bunch of articles revolving around creating multi-step forms using the CDK Stepper API, but since it is a stepper at its base, it can be used for various use cases. In this recipe, we’re going to build a guessing game using the Angular CDK Stepper API, in which the user will guess what the output of a rolled dice will be.

Getting ready

The app that we are going to work with resides in start/apps/chapter09/ng-cdk-stepper inside the cloned repository:

1. Open the code repository in your code editor.
2. Open the terminal, navigate to the code repository directory, and run the following command to serve the project:

   npm run serve ng-cdk-stepper
   

   This should open the app in a new browser tab, and you should see the following:

   

   Figure 9.13: The ng-cdk-stepper app running on http://localhost:4200...

Accessible listbox interactions using CDK Listbox directives

Accessibility is one of the key aspects to focus on when you’re thinking about your end users using your applications. One of the major use cases for the users is to make a selection in apps, whether that’s selecting the color or size of a product or selecting multiple labels for a post. It makes it such a good experience if the experience is accessible. In this recipe, we’re going to replace a color selection feature for products with an accessible alternative using the Angular CDK Listbox APIs.

Getting ready

The app that we are going to work with resides in start/apps/chapter09/ng-cdk-listbox inside the cloned repository:

1. Open the code repository in your code editor.
2. Open the terminal, navigate to the code repository directory, and run the following command to serve the project:

   npm run serve ng-cdk-listbox
   

   This should open the app in a new browser tab,...

Working with nested menus using the Angular CDK Menu API

Menus are vital for so many applications we use today. The pattern of having a menu itself allows us to have experiences that don’t take up space in the DOM all the time and can be shown relative to their triggers on demand. In this recipe, you’ll learn how to create nested menus using the Angular CDK APIs.

Getting ready

The app that we are going to work with resides in start/apps/chapter09/ng-cdk-menu inside the cloned repository:

1. Open the code repository in your code editor.
2. Open the terminal, navigate to the code repository directory, and run the following command to serve the project:

   npm run serve ng-cdk-menu
   

   This should open the app in a new browser tab, and you should see the following:

   

   Figure 9.17: The ng-cdk-menu app running on http://localhost:4200

Now that we have the app running locally, let’s see the steps of the recipe in the next...