Everand Logo

Welcome to Everand!

  • Discover millions of audiobooks, ebooks, and so much more with a free trial

    From $11.99/month after trial. Cancel anytime.

    Mastering Angular Reactive Forms: Build Solid Expertise in Reactive Forms using Form Control, Form Group, Form Array, Validators, Testing and more with Angular 12 Through Real-World Use Cases (English Edition)
    Mastering Angular Reactive Forms: Build Solid Expertise in Reactive Forms using Form Control, Form Group, Form Array, Validators, Testing and more with Angular 12 Through Real-World Use Cases (English Edition)
    Mastering Angular Reactive Forms: Build Solid Expertise in Reactive Forms using Form Control, Form Group, Form Array, Validators, Testing and more with Angular 12 Through Real-World Use Cases (English Edition)
    Ebook280 pages1 hour

    Mastering Angular Reactive Forms: Build Solid Expertise in Reactive Forms using Form Control, Form Group, Form Array, Validators, Testing and more with Angular 12 Through Real-World Use Cases (English Edition)

    By Fanis Prodromou

    ()

    Read preview

    About this ebook

    Mastering Angular Reactive Forms provides all the needed tools to develop an Angular application using Reactive Forms. You will gain knowledge that will help you develop any form, regardless of its size and complexity.
    You will learn about the basic building blocks of Angular Reactive Forms, apply a binding in all HTML form elements using Form Control, Form Group, or Form Array, and apply simple or complex validators. Furthermore, you will learn how to interact with end user's form value changes, how to Unit Test, and how to expand your form by building re-usable form parts beyond basics. The book is based on patterns that are widely used by the community and many enterprise companies.

    After reading this book, you will not just upgrade your knowledge, but you will be a strong Angular developer helping enterprises with solutions in using Angular Reactive Forms.
    LanguageEnglish
    PublisherBPB Online LLP
    Release dateNov 8, 2021
    ISBN9789391030254
    Mastering Angular Reactive Forms: Build Solid Expertise in Reactive Forms using Form Control, Form Group, Form Array, Validators, Testing and more with Angular 12 Through Real-World Use Cases (English Edition)

    Related to Mastering Angular Reactive Forms

    Related ebooks

    Software Development & Engineering For You

    View More
    View More

    Related podcast episodes

    Related categories

    Reviews for Mastering Angular Reactive Forms

    0 ratings

    0 ratings0 reviews

    What did you think?

    Tap to rate

    Review must be at least 10 words

      Book preview

      Mastering Angular Reactive Forms - Fanis Prodromou

      CHAPTER 1

      Getting Started with Reactive Forms

      Introduction

      Angular forms are a communication channel between a user and a system. We collect data through forms, and in most cases, we provide this data in a server using an API. Data is a valuable asset that should be accurate, and thus, working with Angular Reactive Forms is advantageous as we have all the needed tools to reassure data integrity.

      In this chapter, we will learn what Angular Reactive Forms are and why we should master them. We will also learn all the Reactive Form Building Blocks: FormControl, FormGroup, and FormArray.

      To fully follow this book, you should be reasonably familiar with the following:

      Have the required skills to create Angular Components and Angular Modules

      Basic knowledge of HTML5

      Basic understanding of CSS3

      Note: This book's code examples are available in the following GitHub repo separated into different git branches:

      https://github.com/profanis/bpb-mastering-angular-reactive-forms

      Structure

      What are Reactive Forms?

      Why use Reactive Forms?

      Understanding the Building Blocks

      Working with FormControl

      Working with FormGroup

      The formControlName directive

      Nested FormGroup

      The formGroupName directive

      Using FormArray in a FormGroup

      FormGroup Actions

      The Form Model

      The Form Builder

      Objective

      After reading this chapter, you will grasp the Reactive Forms fundamentals, and you will learn how to construct an Angular form. You will also learn to distinguish the various Reactive Form directives and use them per case to increase your overall performance.

      What are Reactive Forms?

      We have two options to construct Angular forms in the Angular framework: Template Driven Forms and Reactive Forms.

      It's quite popular to use the latter in complex forms because it increases the developer's flexibility in terms of validations, unit testing, and splitting the code into smaller chunks.

      Why use Reactive Forms?

      Either developing a simple form or a very complex one, we need to be agile in changes, or better said, to have a maintainable and extensible form. Often the business requirements change, and we have to follow them, sometimes rapidly.

      Having a form that does not respect the Separation of Concerns (SoC)¹ principle makes even the simplest change looks hard.

      So, let's see what a form has to separate:

      templating

      form model

      unit tests

      validations

      By "templating," we mean the actual form the end-user sees in the browser.

      By "form model," we mean the model we create to apply a binding with the HTML template. Since this is an interesting topic, a separate section has been added at the end of this chapter.

      The "unit tests" should be a developer's best friend. We are familiar with unit testing the business code in the Angular Services with Karma/Jasmine, Jest, or any other library. With Reactive Forms, we can test our forms without referring to the HTML but testing only the source code (component.ts).

      The "validations can become complicated. An example would be: An input element should have a minimum of three letters and a maximum of ten letters; it should contain at least one special character, and this validation should exist if another field has a certain value." Oh boy! Well, if we have the right tools, this is just a simple challenge to accomplish. And yes, with Reactive Forms, the validations can be fun.

      Understanding the Building Blocks

      There are three Building Blocks of the Reactive Form, and each one is responsible for handling the value and the validity. It's important to understand that we either set the value from the component.ts code or the value is set while the end-user types in the HTML form fields. It's OK not to understand this fully, but we will soon learn what value and validity mean.

      The FormControl is a class that we map with the individual HTML input element

      The FormGroup is a group of individual FormControl instances

      The FormArray is an array of FormControl, FormGroup, or FormArray instances

      The following figure depicts an example of the preceding:

      Figure 1.1: Reactive Forms Building blocks

      Working with FormControl

      FormControl is one of the three fundamental building blocks of Reactive Forms. The other two are FormGroup and FormArray, which we will see in the next pages. In an HTML form, FormControl(s) are the HTML elements, such as input elements, checkboxes, radio buttons, and select menus.

      Let's depict this with the following image:

      Figure 1.2: A form with two FormControl items

      In this figure, the "First Name and Last Name" inputs are considered FormControl(s), but we first have to convert them to actual FormControl instances.

      At first, and since Angular is modular, we have to import the corresponding module in our Single Page Application (SPA)².

      Note: If a framework like Angular weren't modular and had everything loaded upfront by default, this would mean extra compilation and Tree Shaking time.

      The corresponding module is ReactiveFormsModule, and we have to import it in every feature module³ we meant to use Reactive Forms. By importing this module, Angular injects the required functionality necessary to develop the forms. This functionality consists of several directives and various

      Enjoying the preview?
      Page 1 of 1