Angular Reactive Forms

Angular Reactive Forms

A comprehensive guide for building forms with Angular

Nir Kaufman

This book is for sale at http://leanpub.com/angular-forms

This version was published on 2017-05-13

This is a Leanpub book. Leanpub empowers authors and publishers with the Lean Publishing

process. Lean Publishing is the act of publishing an in-progress ebook using lightweight tools and

many iterations to get reader feedback, pivot until you have the right book and build traction once

you do.

© 2017 Nir Kaufman

Contents

What this book is all about . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

How to use this book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Prior knowledge and experience . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Setting up a development environment . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Part 1. API Guide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

The Building Blocks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

ReactiveFormModule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

FormControl . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

FormControlDirective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

Getting the value . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

Tracking control value changes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Setting the control’s value . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Resetting the Control’s Value . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

Creating a FormGroup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

Setting and resetting the FormGroup’s value . . . . . . . . . . . . . . . . . . . . . . . . . 9

Retrieving child controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

Retrieving the root control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

Mutating the control group . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

Creating a FormArray . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

Working with the FormArray . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

FormArray values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

Mutating the FormArray controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

Using FormBuilder to reduce Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

Tracking Control State . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Control state properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Displaying a validation message . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

Tracking the Group’s state . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

Styling form controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

Setting the state manually . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

CONTENTS

Resetting a control’s state . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

Validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

Building a login form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

Built-in validators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

Tracking validation status . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

Custom validators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

Working with the errors Map . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

Managing the errors object manually . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

Checking for an Error . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

Async validators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

Passing arguments to a custom validator . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

Tracking validation status . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

Reactive status changes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

Using native validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

Disabling and enabling validation of a control . . . . . . . . . . . . . . . . . . . . . . . . 35

Controlling the side effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

Preventing the status change event . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

Reacting to disabled events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

Managing validators manually . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

Part 2. Forms Cookbook . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

Nested forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

Part 3. Advanced Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

Custom Form Controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

The ControlValueAccessor Interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

ControlValueAccessor Directives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

Sample Custom Form Control: Button Group . . . . . . . . . . . . . . . . . . . . . . . . 50

Custom Form Control Validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

The Slider Custom Control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

Adding Custom Validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

Passing Arguments to a Built-in Validator . . . . . . . . . . . . . . . . . . . . . . . . . . 58

Extracting the Validator Function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

Custom Validator Directive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

CONTENTS

Dynamic Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63

Dynamic Control Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63

Dynamic Form Renderer Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65

Using the Dynamic Form Renderer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68

State Driven Forms With Redux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

Redux And Angular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

Building a State Driven Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

Connecting a Form Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74

CONTENTS 1

What this book is all about

This is a straightforward, comprehensive guide to Angular’s Reactive Forms module. Each method

is explained and demonstrated with code. It aims to be a reference book, a professional guide, and a

cookbook of recipes for real-world usage.

How to use this book

The book is divided to three parts:

1. API Guide: Exploring the API in detail

2. Forms Cookbook: Practical recipes for real-world challenges

3. Advanced Forms: Implementation details and advanced usage

While I recommend that you read the opening section first, you can skip straight to the examples,

use the API guide for reference, or dive right into the advanced stuff. It’s really up to you.

Prior knowledge and experience

This book is aimed at developers who are familiar with web technologies (JavaScript, HTML, CSS)

and have some experience with web development. You should be familiar with Angular (>2.x). You

don’t need to be an expert, but this book doesn’t cover the basics. If you are new to Angular, you can

start by reading the official documentation and walking through Angular’s official tutorial. Visit the

Angular website for more details: https://angular.io/.

Setting up a development environment

This book will be most effective if you code along with the examples. The recommended way to

build an Angular application from scratch is using angular-cli. You can install this tool with npm:

npm install -g @angular/cli. For detailed instructions, visit: https://cli.angular.io/.

You will need a way to edit your code. I’ve been using the WebStorm IDE for my projects for several

years, and I highly recommend you give it a try. Visit the JetBrains website for more information:

https://www.jetbrains.com/webstorm/.

An open source, free alternative is Microsoft’s Visual Studio Code. It’s a cross-platform text editor

with some IDE features and a large collection of community plugins for extra capabilities. Visit the

website for more information: https://code.visualstudio.com/.

Part 1. API Guide