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 @angular/forms
• formControl directive is provided by ReactiveFormsModule

That means importing FormControl in your TypeScript file is not enough. You must also import the module that makes the template directive available.

The fix

In the Angular module that declares EditItemComponent, add:

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

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

If you are using Angular Material autocomplete, you also need the relevant Material modules for your Angular Material version.

For older Angular Material versions shown in your example (md- prefix), that usually includes modules such as:

• MdInputModule
• MdAutocompleteModule

In newer Angular Material versions, md- became mat-, for example:

• MatInputModule
• MatAutocompleteModule

The key idea is this: class imports are for TypeScript, module imports are for templates.

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';
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent {
  stateCtrl = new FormControl('');
  states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas'];

  filteredStates = this.stateCtrl.valueChanges
    .startWith('')
    .map(value => this.filterStates(value));

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

Template

<md-input-container>
  <input mdInput placeholder="Category" [mdAutocomplete]="auto" [formControl]="stateCtrl">
</md-input-container>

<md-autocomplete #auto="mdAutocomplete">
  <md-option *ngFor="let state of filteredStates | async" [value]="state">
    {{ state }}
  </md-option>
</md-autocomplete>

Module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { MdInputModule } from '@angular/material';
import { MdAutocompleteModule } from '@angular/material';

import { ExampleComponent } from './example.component';

@NgModule({
  declarations: [ExampleComponent],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    MdInputModule,
    MdAutocompleteModule
  ],
  bootstrap: [ExampleComponent]
})
export class AppModule {}

Explanation

• FormControl stores and tracks the input value.
• [formControl]="stateCtrl" connects the input element to that control.
• ReactiveFormsModule enables Angular to understand the formControl directive in templates.
• Material modules enable Material-specific directives like mdInput and mdAutocomplete.

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 formControl as a valid directive.
9. Angular links the input element and the FormControl object.
10. When the user types, the FormControl value updates.
11. When the control value changes, valueChanges emits a new value.

What happens if ReactiveFormsModule is missing

1. Angular loads the component template.
2. It sees [formControl]="nameCtrl".
3. It searches for a directive named formControl.
4. None is available in the current module.
5. Angular throws:

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

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
  .startWith('')
  .map(value => this.filterStates(value));

Validation patterns

nameCtrl = new FormControl('', Validators.required);

Early fixes during debugging

When template binding errors happen, developers typically check:

• Is the component declared in the correct module?
• Is the needed Angular module imported there?
• Is the right Material module imported?
• Are the template selectors correct for the Material version being used?

Feature-module awareness

A common real-world issue is importing ReactiveFormsModule into AppModule but using the component inside another module. The import must exist in the module that declares that component, directly or through a shared module.

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

Example

<input [(ngModel)]="name" [formControl]="nameCtrl">

This is usually a bad idea unless you specifically know why you are combining them.

Better

Use one approach consistently.

4. Forgetting Angular Material module imports

Even after fixing formControl, you may get other errors if Material modules are missing.

Fix

Import the relevant Material modules for your version.

5. Using old Material syntax with new Material docs

Your example uses old selectors:

• md-input-container
• mdInput
• md-autocomplete
• md-option

In newer Angular Material versions these became:

• mat-form-field
• matInput
• mat-autocomplete
• mat-option

Make sure your code matches your installed Material version.

6. Assuming every binding error is about HTML

This error mentions input, but the problem is not the HTML element itself. The issue is that Angular does not know the directive attached to it.

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

FormsModule vs ReactiveFormsModule

formControl vs formControlName

Example of [formControl]

emailCtrl = new FormControl('');

<input [formControl]="emailCtrl">

Example of formControlName

form = new FormGroup({
  email: new FormControl('')
});

<form [formGroup]="form">
  <input formControlName="email">
</form>

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 '@angular/forms';

Rules to remember

• FormControl import in TypeScript is not enough.
• ReactiveFormsModule is required for the formControl directive.
• Import the module where the component is declared.
• For ngModel, use FormsModule instead.
• For Material components, also import the correct Material modules.
• Match md- or mat- syntax to your Angular Material version.

Common Material modules

Older Material versions:

MdInputModule
MdAutocompleteModule

Newer Material versions:

MatInputModule
MatAutocompleteModule

Safe autocomplete filter pattern

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

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 AppModule?

Only if the component is declared there. If the component is declared in a feature module, import it in that feature module.

Is this error related to the input element itself?

No. The input element is fine. Angular just does not recognize the formControl directive attached to it.

• 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.