Angular

Angular Reactive Forms Cheat Sheet

Cory Rylan

- 2 minutes

This article has been updated to the latest version Angular 11 and tested with Angular 10. 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   
 

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

Related Posts

Angular

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
Angular

Measuring Angular Performance with Source Map Explorer

Learn how to identify performance bottlenecks in your Angular application with the Source Map Explorer tool.

Read Article
Angular

Intro to Angular Http Interceptors

Learn the basics of using Http Interceptors to handle Http requests in Angular.

Read Article