FormControl is Not a Function in Angular – Causes and Fix

In this tutorial, you will clear the concept that FormControl is not a function in Angular and learn how to fix it.

If you are working with a Reactive Form in Angular, then you will get the error

What is the reason for this error?

This error occurs due to incorrect imports, wrong usage, or missing modules in your Angular application.

What is FormControl in Angular?

In Angular, FormControl is a class, and it is used to track the input value, validation, Form state, and User interactions in Reactive Forms.

import { FormControl } from '@angular/forms';
name = new FormControl('');

Common Causes of “FormControl is Not a Function”

There are many common causes of this.

1. Wrong Import of FormControl

Sometimes, developers wrongly import FormControl.

❌ Incorrect

import { FormControl } from 'forms';

✅ Correct

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

2. ReactiveFormsModule Not Imported

Reactive forms require ReactiveFormsModule to be imported.

In app.module.ts

import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
  imports: [
    ReactiveFormsModule
  ]
})
export class AppModule {}

Note: Without ReactiveFormsModule, Angular forms will not work correctly.

3. Using FormControl Like a Function

Sometimes developers use FormControl as a function instead of a class.

❌ Incorrect

name = FormControl('');

✅ Correct

name = new FormControl('');

Note: FormControl is a class, and it must be instantiated with new.

4. Incorrect FormBuilder Usage

When using FormBuilder, the syntax must be correct.

❌ Incorrect

name = this.fb.FormControl('');

✅ Correct

name = this.fb.control('');

Example:

constructor(private fb: FormBuilder) {}
form = this.fb.group({
  name: ['']
});

Correct Angular Reactive Form Example

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

@Component({
  selector: 'app-root',
  template: `
    <input [formControl]="name">
    <p>{{name.value}}</p>
  `
})
export class AppComponent {
  name = new FormControl('');
}

FormControl vs FormGroup

What are the best Practices to Avoid This Error?