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 15 and tested with Angular 14. 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   

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

Related Posts


Using Web Components in Angular Forms with Element Internals

Learn how to create and use Web Components in Angular apps leveraging the new Element Internals APIs.

Read Article
VMWare Clarity

Building forms with Angular and Clarity Design

Learn how to create high-quality forms using Angular and the Clarity Design System.

Read Article

Using HTML5 Date Input with Date Objects and Angular

Learn how to use JavaScript Date Objects with the native HTML5 datepicker and Angular Forms.

Read Article