How to Use FormControl in Angular: Simple Guide

Use FormControl in Angular to track the value and validation status of a single form input. Create a FormControl instance in your component and bind it to an input element using [formControl] in the template.

Syntax

The basic syntax to create a FormControl is by importing it from @angular/forms and initializing it with an optional default value and validators.

• new FormControl(value, validators): Creates a new control with an initial value and optional validation rules.
• formControl directive: Binds the control to an input element in the template.

typescript

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

const nameControl = new FormControl('initial value');

// In template:
// <input [formControl]="nameControl">

Example

This example shows how to create a FormControl for a text input, bind it in the template, and display the current value below the input.

typescript

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

@Component({
  selector: 'app-name-input',
  template: `
    <label for="name">Name:</label>
    <input id="name" [formControl]="nameControl" />
    <p>You typed: {{ nameControl.value }}</p>
  `
})
export class NameInputComponent {
  nameControl = new FormControl('');
}

Output

A text input labeled 'Name:' with live text below showing 'You typed: ' followed by the input's current value.

Common Pitfalls

Common mistakes when using FormControl include:

• Not importing ReactiveFormsModule in your Angular module, which is required for formControl binding to work.
• Trying to use formControl on elements without importing the forms module, causing errors.
• Not initializing the FormControl before binding it in the template, which can cause undefined errors.

typescript

/* Wrong: Missing ReactiveFormsModule import in app.module.ts */
// Causes error: Can't bind to 'formControl' since it isn't a known property

/* Right: Import ReactiveFormsModule */
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [ReactiveFormsModule]
})
export class AppModule {}

Quick Reference

Summary tips for using FormControl:

• Always import ReactiveFormsModule in your module.
• Initialize FormControl in your component before using it in the template.
• Use [formControl] directive to bind the control to input elements.
• Access the current value with formControl.value.
• Add validators as the second argument to FormControl constructor.

Key Takeaways

Import ReactiveFormsModule to use FormControl in templates.

Create a FormControl instance in your component to manage input state.

Bind FormControl to inputs using the [formControl] directive.

Access and react to input values via formControl.value.

Initialize FormControl before using it to avoid errors.