Cannot find control with name Angular Origin: On your device Last updated 15 Oct 2026

Angular: Error: Cannot find control with name: 'email' (reactive forms)

A formControlName points at a control that does not exist in the bound FormGroup.

Exact message you may see Cannot find control with nameCannot find control with pathError: Cannot find control with name: 'email'There is no FormControl instance attached to form control element with name
Explore the map of this error Full error map →
Seen on: Angular TypeScript

Meaning

With reactive forms the name in the template must match a key in the FormGroup exactly (case-sensitive). The error also appears when the control is added later (after the template first renders), when the form group is undefined, or when a nested group needs formGroupName.

Common causes

  • Name in formControlName differs from the key in the FormGroup (typo, case)
  • The FormGroup is created after the template renders (async data)
  • Nested group not wrapped in formGroupName / [formGroup]
  • Control removed with removeControl or form re-created
  • Using the same name under the wrong parent group

⚡ Quick fix

  1. Make the template name identical to the group key
  2. Build the form in the constructor or guard the template with @if (form)
  3. Use formGroupName for nested groups

Detailed fix by platform

Angular

  1. form = this.fb.group({ email: [''] }) and <input formControlName="email">
  2. For nested data: <div formGroupName="address"><input formControlName="city"></div>

Code examples

Names must match

typescript
form = this.fb.nonNullable.group({
  email: ['', [Validators.required, Validators.email]],
  address: this.fb.nonNullable.group({ city: [''] }),
});
// template:
// <form [formGroup]="form">
//   <input formControlName="email">
//   <div formGroupName="address"><input formControlName="city"></div>
// </form>

How to diagnose

  1. Name — Spelling and case of the control?
  2. Timing — Is the FormGroup ready before the template renders?
  3. Nesting — Parent formGroupName present?

🔧 Still not fixed?

Many errors look alike. If the steps above didn’t solve it, one of these is probably what you’re facing:

Where this error sits

Origin: On your device. Errors that are often confused with or caused by this one (click to open):

Can't find stylesheet to import — Angular (Sass): Error: Can't find stylesheet to import. @import 'variables'; (Angular)Can't find stylesheet…Cannot GET /route on refresh — Angular (production): Cannot GET /dashboard — 404 when refreshing or opening a deep link (Angular)Cannot GET /route on …Component is not resolved: templateUrl — Angular tests: Component 'X' is not resolved: templateUrl: ./x.component.html — Did you run and wait for 'resolveComponentResources()'? (Angular)Component is not reso…EmptyError — RxJS: EmptyError: no elements in sequence (firstValueFrom / lastValueFrom on an empty Observable) (Angular)EmptyErrorERESOLVE peer dependency conflict after ng update — Angular: npm ERR! ERESOLVE could not resolve — Conflicting peer dependency: @angular/core@"^16.0.0" (after ng update / ng add) (Angular)ERESOLVE peer depende…Expected to be running in 'ProxyZone' — Angular tests: Error: Expected to be running in 'ProxyZone', but it was not found. (Angular)Expected to be runnin…Karma Disconnected / no captured browser — Angular tests: Disconnected, because no message in 30000 ms. / ERROR [launcher]: Cannot start ChromeHeadless (Angular)Karma Disconnected / …mat-form-field must contain a MatFormFieldControl — Angular Material: Error: mat-form-field must contain a MatFormFieldControl (Angular)mat-form-field must c…Cannot fi…

Explore the map of this error Full error map →

🧠 Still stuck? Analyze your error

Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.

💬 What worked for others

No tips yet — did something else fix this for you?

Share what worked for you

Tips are checked by an editor before they appear. Links are removed.