Angular Reactive Form Example

June 29, 2019

In this post, we will create an example of an Angular Reactive form.

We start by executing the following command on a terminal windows.
The command will create the "angular-reactive-form-example" folder

ng new angular-reactive-form-example

Lets then proceed to open the folder.

cd angular-reactive-form-example

Angular Component

Create the TestForm component with the following command

ng generate component TestForm

And update the content of the following two files: test-form/test-form.component.ts, and test-form/test-form.component.html.


import { Component, OnInit } from '@angular/core';

import { FormBuilder } from '@angular/forms';

  selector: 'app-test-form',
  templateUrl: './test-form.component.html',
  styleUrls: ['./test-form.component.css']
export class TestFormComponent implements OnInit {

  testForm ={
    id: 1,                        // Id
    name: 'My Name',              // Name
    comments: 'My Comments',      // Comments
    color: 'Blue',                // Favorite Color
    season: 'Spring',             // Favorite Season
    hobbies: this.formBuilder.array([ // Hobbies
       false, true, true, false

  colors  = ['Red', 'Blue', 'Yellow', 'Purple', 'Orange', 'Green'];
  seasons = ['Spring', 'Summer', 'Autumm', 'Winter'];
  hobbies = ['Reading', 'Writing', 'Painting', 'Walking'];

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {

  onSubmit() {



<h2>Angular Form Example</h2>
<div><em>Reactive Form</em></div><br/>                           

<form [formGroup]="testForm" (ngSubmit)="onSubmit()">

    <input type="text" formControlName="name" size="20" /><br/>

    <textarea formControlName="comments"
      cols="40" rows="4"></textarea><br/>

    <span>Favorite Color</span><br/>
    <select formControlName="color">
      <option *ngFor="let c of colors" value="{{c}}">{{c}}</option>

    <span>Favorite Season</span><br/>
    <span *ngFor="let s of seasons">
      <input type="radio"
        value="{{s}}" formControlName="season" /> {{s}}

  <p formArrayName="hobbies">
    <span *ngFor="let h of hobbies; index as i">
      <input type="checkbox" 
        value="{{h}}" formControlName="{{i}}" /> {{h}}

  <button type="submit">Submit</button>


Angular Main Module

Update Angular main module file, app.module.ts, to include our TestFormComponent, and the ReactiveFormsModule functionality.


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';                        

import { ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { TestFormComponent } from './test-form/test-form.component';

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

Angular Main Component Html

Replace the content of Angular main component html file, app.component.html, with the following text.



Open the App

Now we can open the app with the ng serve command.

ng serve --open

The app will be open on the browser at the http://localhost:4000 location.

Check this app on Github here.

See a live demo here.

See this app on StackBlitz here.