Cory Rylan

My name is , Google Developer Expert, Speaker, Software Developer. Building Design Systems and Web Components.

Follow @coryrylan

Angular Reactive Forms Cheat Sheet

Cory Rylan

- 2 minutes


This article has been updated to the latest version Angular 17 and tested with Angular 16. The content is likely still applicable for all Angular 2 + versions.

Angular Reactive Forms has a fantastic API to work with and makes using forms a breeze. Even with such a well thought out API occasionally I need to look up how to bind to a particular input type. Because there are so many input types, I decided to create this tutorial or cheat sheet of every built-in browser input type and how to bind to it using Angular Reactive Forms. Check out the code below as well as a working demo example!

Component TypeScript

Using the Reactive Forms API, we can create complex forms easily with provided services such as the FormBuilder service.

import { Component } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
export class AppComponent {
form: FormGroup;

constructor(private formBuilder: FormBuilder) {
this.form ={
name: [''],
color: ['#ff0000'],
password: [''],
age: [100],
date: [new Date()],
subscribe: [true],
memory: [32],
distance: [50],
region: ['south-america']

submit() {

Component Template

Below is the template that shows most of the basic built-in HTML input types and how they connect to an Angular form.

<h1>Advanced Form Types</h1>

<form [formGroup]="form" (ngSubmit)="submit()">
<!-- text input in angular forms -->
<label for="name">Name (type="text")</label>
<input formControlName="name" id="name" />

<!-- color input in angular forms -->
<label for="color">Favorite Color (type="color")</label>
<input formControlName="color" id="color" type="color" />

<!-- password input in angular forms -->
<label for="password">Password (type="password")</label>
<input formControlName="password" id="password" type="password" />

<!-- number input in angular forms -->
<label for="age">Age (type="number")</label>
<input formControlName="age" id="age" type="number" />

<!-- Distance input in angular forms -->
<label for="date">Date (type="date")</label>
<input formControlName="date" id="date" type="date" />

<!-- checkbox input in angular forms -->
<label class="checkbox-wrapper">
<input formControlName="subscribe" type="checkbox" />
Subscribe (type="checkbox")

<!-- select input in angular forms -->
<label for="memory">Memory (select)</label>
<select formControlName="memory" id="memory">
<option value="16">16 Gigabytes</option>
<option value="32">32 Gigabytes</option>
<option value="64">64 Gigabytes</option>
<option value="128">128 Gigabytes</option>

<!-- range input in angular forms -->
<label for="distance">Distance (type="range")</label>

<!-- radio input in angular forms -->
<span class="label">Region (type="radio")</span>

North America

South America
<input formControlName="region" type="radio" name="region" value="europe" />

<br />

Check out the full working demo link below!

View Demo Code   
Twitter Facebook LinkedIn Email

No spam. Short occasional updates on Web Development articles, videos, and new courses in your inbox.

Related Posts


Creating Dynamic Tables in Angular

Learn how to easily create HTML tables in Angular from dynamic data sources.

Read Article
Web Components

Reusable Component Patterns - Default Slots

Learn about how to use default slots in Web Components for a more flexible API design.

Read Article
Web Components

Reusable Component Anti-Patterns - Semantic Obfuscation

Learn about UI Component API design and one of the common anti-patterns, Semantic Obfuscation.

Read Article