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

  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!

Angular Form Essentials E-Book

Get started creating forms in Angular with my new E-Book!

Read now!

View Demo Code