No Value Accessor for Form Control in Angular – Causes and Fix

Angular Developers sometimes face this error when working with Angular forms.

This error usually happens in Reactive Forms or Template-driven Forms when the correct module, directive, or component configuration is missing.

What is the meaning of “No Value Accessor for Form Control”?

In Angular forms, a value accessor is a bridge between the form model and the DOM element.

If Angular cannot find a value accessor, it throws this error.

Common Causes of the Error

There are many common causes of this error

1. Using formControlName Without Importing ReactiveFormsModule

One of the most common issues is when you forget to import the ReactiveFormsModule.

❌ Incorrect Setup

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

✅ Correct Setup

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

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

Note: Without ReactiveFormsModule, Angular cannot recognize formControlName.

2. Missing FormsModule in Template-Driven Forms

If you are using template-driven forms, you must import FormsModule.

❌ Wrong Way

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

✅ Correct Way

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

3. Using formControlName on Unsupported Elements

Some HTML elements do not support Angular form controls.

❌ Incorrect Example

<div formControlName="username"></div>

✅ Correct Example

<input type="text" formControlName="username">

Note: Angular form directives work with elements like input, textarea, select, etc.

4. Missing FormControlName Directive in FormGroup

When you are using formControlName outside a FormGroup.

❌ Wrong

<input formControlName="username">

✅ Correct

<form [formGroup]="loginForm">
  <input formControlName="username">
</form>

in TypeScript file

loginForm = new FormGroup({
  username: new FormControl('')
});

Working Simple Angular Example

You can see below a simple Angular form example.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {

  loginForm = new FormGroup({
    username: new FormControl(''),
    password: new FormControl('')
  });

}

In the HTML file

<form [formGroup]="loginForm">
  <input type="text" formControlName="username">
  <input type="password" formControlName="password">
</form>

Best Practices to Avoid This Error

Conclusion

The “No Value Accessor for Form Control” error in Angular usually occurs when

1. Missing ReactiveFormsModule or FormsModule
2. Using custom components without ControlValueAccessor
3. Using unsupported elements
4. Incorrect form structure