Skip to main content

Angular Reactive Forms Cheat Sheet


Angular's FormControl is a fundamental component in Reactive Forms, representing the smallest entity of the form, linked to an HTML input. It tracks the input value and its validation state.

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

export class AppComponent {
name = new FormControl('');

Here, a FormControl named name is created, initially empty. It can be bound to an HTML input and is used to track its value and validation status.


FormGroup aggregates multiple FormControl instances into a cohesive group. This is useful for representing a form with multiple fields as a single entity.

import { FormGroup, FormControl } from '@angular/forms';

export class AppComponent {
userForm = new FormGroup({
name: new FormControl(''),
email: new FormControl(''),

In this example, userForm is a FormGroup containing two FormControls, name and email. The group manages the overall form state and values.


FormBuilder provides a more concise way to create forms by reducing the boilerplate code. It is a service that helps in creating instances of FormControl and FormGroup.

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

export class AppComponent {
constructor(private fb: FormBuilder) {}

userForm ={
name: ['', Validators.required],
email: [''],

FormBuilder is injected and used to create a form group with name and email controls. Validators can be easily applied using this approach.


FormArray is useful for managing a collection of FormControls dynamically. It allows the addition or removal of controls at runtime.

import { FormArray, FormControl } from '@angular/forms';

export class AppComponent {
hobbies = new FormArray([]);

addHobby() {
this.hobbies.push(new FormControl(''));

hobbies is a FormArray to which new controls can be added dynamically, representing a list of hobbies that a user can enter.


Validators are essential in ensuring the integrity of the data entered in the form. Angular provides built-in validators, and custom validators can also be defined.

import { FormControl, Validators } from '@angular/forms';

export class AppComponent {
email = new FormControl('', [Validators.required,]);

Here, the email control is assigned required and email validators, ensuring the input is not empty and follows a valid email format.

Form Submission

Handling form submission in Angular involves binding the (ngSubmit) event to a method that processes the form data.

<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
<input formControlName="name">
<input formControlName="email">
<button type="submit">Submit</button>

In this template, submitting the form triggers the onSubmit() method, where userForm's value can be processed or sent to a server.

Form Initialization

Initializing a form typically involves setting up form controls and their default values within a component's class.

import { FormGroup, FormControl } from '@angular/forms';

export class AppComponent {
userForm = new FormGroup({
name: new FormControl('John Doe'),
email: new FormControl(''),

Here, userForm is initialized with default values for name and email.

Form Control Status

Inspecting the properties of a FormControl can provide insights into its current state, such as value, validity, and whether it has been touched or modified.

<p>Name value: {{ userForm.get('name').value }}</p>
<p>Name valid: {{ userForm.get('name').valid }}</p>

This snippet shows how to display the value and validity status of the name control in the template.

Form Reset

Resetting a form clears the values and resets the control states. This can be done for the entire form or for individual controls.

<button type="button" (click)="resetForm()">Reset Form</button>

resetForm() {

Clicking the reset button triggers resetForm() which resets the userForm, clearing all input fields and validation states.