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

**Code:** `Cannot find control with name` · **Category:** Angular · **Seen on:** Angular, TypeScript

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

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

---
Source: [WhatIsMyError](https://whatismyerror.com/errors/angular/cannot-find-control-with-name)