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

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

Detailed fix by platform

Code examples

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

More related errors