# Angular: NG8003: No directive found with exportAs 'ngForm' (template reference variable)

**Code:** `NG8003` · **Category:** Angular · **Seen on:** Angular, TypeScript

A template reference such as `#f="ngForm"` points at a directive Angular cannot find on that element — the module that provides it is not imported.

## Meaning

`#ref="name"` asks for the directive whose `exportAs` is that name. If `FormsModule`, `ReactiveFormsModule` or the Material module that exports it is not imported, there is no directive with that name. Fix the import, not the template.

## Common causes

- `FormsModule` missing for `#f="ngForm"` or `#c="ngModel"`
- `ReactiveFormsModule` missing for `formGroup` references
- Material directive module not imported (for example `MatMenuModule` for `#menu="matMenu"`)
- Directive not applied on that element (typo in its selector)
- Standalone component forgot the directive in `imports`

## Quick fix

1. Import `FormsModule` (or the module/directive that provides the exportAs)
2. Check that the directive's selector actually matches the element
3. Open the library docs for the exact `exportAs` name

## Detailed fix by platform

### Angular

1. Standalone: `imports: [FormsModule]`
2. NgModule: add `FormsModule` to the `imports` of the module that declares the component

## Code examples

### Template reference with exportAs

```html
<form #f="ngForm" (ngSubmit)="save(f.value)">   <!-- needs FormsModule -->
  <input name="email" ngModel required>
  <button [disabled]="f.invalid">Save</button>
</form>
```

## How to diagnose

1. **Name** — Which exportAs is requested?
2. **Imports** — Is the providing module imported here?
3. **Element** — Does the directive attach to this element?

---
Source: [WhatIsMyError](https://whatismyerror.com/errors/angular/ng8003-no-directive-with-exportas)