Angular formControl Error with Material Autocomplete: Why It Happens and How to Fix It

By the end of this page, you will understand why Angular shows the error Can't bind to 'formControl' since it isn't a known property of 'input', how FormControl is connected to Angular Reactive Forms, and which module imports are required when using Angular Material Autocomplete with a reactive form input.

formControl is not a normal HTML attribute. It is an Angular directive provided by the Reactive Forms system.

When Angular sees this:

<input [formControl]="stateCtrl">

it tries to find a directive named formControl. If the Angular module that declares your component has not imported ReactiveFormsModule, Angular does not know what formControl means, so it throws this error:

Can't bind to 'formControl' since it isn't a known property of 'input'

Why this matters

In Angular, components do not automatically get access to every directive in the framework. Directives such as:

• ngIf
• ngFor
• ngModel
• formControl
• formGroup

are made available by importing the correct Angular modules.

For reactive forms:

• FormControl class comes from

Think of Angular templates like a workshop.

• Your component class brings the tools you create yourself.
• Angular modules bring the tools the workshop already provides.

You created this tool in code:

this.stateCtrl = new FormControl();

But in the template, you also want to use Angular's built-in formControl tool:

<input [formControl]="stateCtrl">

If ReactiveFormsModule is not imported, it is like trying to use a tool that was never delivered to the workshop. Angular looks around, cannot find it, and reports that formControl is not a known property.

To use reactive form controls in Angular, you need two things:

1. A FormControl in the component class
2. ReactiveFormsModule imported in the Angular module

Core syntax

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

export class ExampleComponent {
  nameCtrl = new FormControl('');
}

<input [formControl]="nameCtrl">

Working example

Component

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import 'rxjs/add/operator/startWith';
 ;

({
  : ,
  : 
})
   {
  stateCtrl =  ();
  states = [, , , ];

  filteredStates = ..
    .()
    .( .(value));

  () {
     ..(
      state.().((value || ).())
    );
  }
}

Consider this small example:

nameCtrl = new FormControl('');

<input [formControl]="nameCtrl">

imports: [ReactiveFormsModule]

What happens step by step

1. Angular loads the module.
2. The module imports ReactiveFormsModule.
3. That module registers directives such as:
   • formControl
   • formGroup
   • formControlName
4. Angular creates the component instance.
5. The component creates nameCtrl as a FormControl.
6. Angular parses the template.
7. It sees [formControl]="nameCtrl" on the <input>.
8. Because ReactiveFormsModule is imported, Angular recognizes as a valid directive.

Reactive form controls are used in many real applications:

Search and autocomplete

• Product search boxes
• City or country suggestions
• User mention dropdowns
• Category selectors

Forms with validation

• Registration forms
• Login forms
• Shipping address forms
• Payment details

Dynamic UI behavior

• Filter a list as the user types
• Enable or disable buttons based on input
• Show validation errors immediately
• Transform user input before submission

API-driven forms

A FormControl can listen to valueChanges and trigger logic like:

• filtering local arrays
• calling APIs for suggestions
• debouncing user input
• validating values asynchronously

Autocomplete is a very common case because the input value changes often and the UI must react immediately.

In real projects, developers usually use reactive forms with a few common patterns.

Module-level setup

Teams usually create a feature module and import form modules there, instead of importing everything everywhere.

imports: [CommonModule, ReactiveFormsModule]

Guarding against null or empty values

When autocomplete starts, the value may be null, '', or even an object in more advanced cases.

filterStates(value: string) {
  const search = (value || '').toLowerCase();
  return this.states.filter(state => state.toLowerCase().includes(search));
}

Using valueChanges for live filtering

this.filteredStates = this.stateCtrl.valueChanges
  .()
  .( .(value));

Here are the most common beginner mistakes behind this error.

1. Importing FormControl but not ReactiveFormsModule

This is the exact issue in your example.

Broken

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

This only makes the class available in TypeScript.

Fix

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

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

2. Importing the module in the wrong Angular module

If EditItemComponent belongs to ItemsModule, importing ReactiveFormsModule only in AppModule may not help.

Fix

Import it in the module that declares the component.

3. Mixing template-driven and reactive forms without understanding the difference

Here are the related Angular concepts that are easy to confuse.

Quick fix for this error

If you see:

Can't bind to 'formControl' since it isn't a known property of 'input'

check this first:

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

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

Reactive forms essentials

In the component

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

nameCtrl = new FormControl('');

In the template

<input [formControl]="nameCtrl">

In the module

import { ReactiveFormsModule } from ;

Why does Angular say formControl is not a known property?

Because the formControl directive is not available in the current Angular module. Usually, ReactiveFormsModule is missing.

Is importing FormControl enough?

No. That only lets you use the FormControl class in TypeScript. The template directive still requires ReactiveFormsModule.

Should I import FormsModule or ReactiveFormsModule?

Use ReactiveFormsModule for [formControl]. Use FormsModule for [(ngModel)].

Why does this happen even though my code compiles?

TypeScript can compile your component class, but Angular template compilation fails because the directive is unavailable in the template scope.

Do I also need Angular Material imports?

Yes, for Material-specific directives like mdInput and mdAutocomplete. Those are separate from reactive forms.

Does the import go in ?

• Reactive Forms — The larger Angular forms approach that provides FormControl, FormGroup, and validation.
• FormsModule — Used for template-driven forms and useful for comparing with reactive forms.
• FormGroup — Groups multiple form controls into a single form model.
• formControlName — Another reactive forms directive used when working with FormGroup.
• Angular Material Autocomplete — The UI component being used alongside the form control.
• Angular Modules — Important because directives become available through module imports.
• Template Binding — Helps explain what Angular is doing when it sees [formControl].
• valueChanges — Commonly used with FormControl to react to user input in real time.