Cory Rylan

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

Follow @coryrylan
Angular

Angular Reactive Forms Cheat Sheet

Cory Rylan

- 2 minutes

Updated

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';

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

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

submit() {
console.log(this.form.value);
}
}

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")
</label>

<!-- 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>
</select>

<!-- range input in angular forms -->
<label for="distance">Distance (type="range")</label>
<input
formControlName="distance"
id="distance"
type="range"
min="0"
max:"100"
/>


<!-- radio input in angular forms -->
<span class="label">Region (type="radio")</span>
<label>
<input
formControlName="region"
type="radio"
name="region"
value="north-america"
/>

North America
</label>
<label>
<input
formControlName="region"
type="radio"
name="region"
value="south-america"
/>

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

<br />
<button>Submit</button>
</form>

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

Angular

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