Ошибка Angular: "There is no directive with exportAs set to ngForm" при работе с формами

Причина ошибки

Ошибка "There is no directive with exportAs set to ngForm" возникает, когда Angular не может найти директиву NgForm, экспортирующую себя под именем ngForm. Это происходит, если FormsModule не импортирован в ваш модуль или импортирован неправильно. Даже если вы думаете, что импортировали его, ошибка может быть связана с тем, что вы импортируете FormsModule в AppModule, но ваш компонент объявлен в другом модуле (например, в FeatureModule), который не импортирует FormsModule.

Решение

Убедитесь, что FormsModule импортирован в тот модуль, где объявлен ваш компонент. Чаще всего это AppModule, но если у вас есть модули с ленивой загрузкой, импорт нужно делать в каждый из них. Вот правильный пример:

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // <-- обязательно импортировать

import { AppComponent } from './app.component';
import { UserRegistrationComponent } from './user-registration/user-registration.component';

@NgModule({
  declarations: [
    AppComponent,
    UserRegistrationComponent // <-- компонент объявлен здесь
  ],
  imports: [
    BrowserModule,
    FormsModule // <-- FormsModule добавлен в imports
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Пошаговая проверка

1. Проверьте импорт в модуле: Убедитесь, что строка import { FormsModule } from '@angular/forms'; присутствует в файле модуля.
2. Проверьте массив imports: FormsModule должен быть в массиве imports, а не в declarations или providers.
3. Если у вас несколько модулей: Каждый модуль, который использует ngModel или ngForm, должен импортировать FormsModule.
4. Проверьте версию Angular: В старых версиях (2.x) FormsModule мог быть в другом пакете. Убедитесь, что используете актуальные версии.
5. Перезапустите сервер: После добавления импорта обязательно перезапустите сервер разработки (ng serve), так как изменения в модулях не применяются горячей перезагрузкой.

Дополнительная проверка

Если ошибка всё ещё появляется, проверьте, не импортировали ли вы случайно ReactiveFormsModule вместо FormsModule. Для шаблонных форм (template-driven forms) нужен именно FormsModule. ReactiveFormsModule используется для реактивных форм и не содержит директивы ngForm.

// Неправильно:
import { ReactiveFormsModule } from '@angular/forms'; // это для реактивных форм

// Правильно:
import { FormsModule } from '@angular/forms'; // для шаблонных форм

Проверка на опечатки

Убедитесь, что в шаблоне вы используете именно #myForm="ngForm" (с маленькой буквы 'n' в 'ngForm'). Angular чувствителен к регистру, и #myForm="ngform" или #myForm="NgForm" вызовут эту же ошибку.

После всех этих исправлений ваша форма должна работать корректно, и вы сможете использовать myForm.valid, myForm.submitted и другие свойства директивы NgForm.

// app.module.ts
import { ReactiveFormsModule } from '@angular/forms'; // импортируем ReactiveFormsModule

@NgModule({
  imports: [
    BrowserModule,
    ReactiveFormsModule // <-- используем реактивные формы
  ]
})
export class AppModule { }

// user-registration.component.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-user-registration',
  templateUrl: './user-registration.component.html'
})
export class UserRegistrationComponent implements OnInit {
  registrationForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.registrationForm = this.fb.group({
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required, Validators.minLength(6)]]
    });
  }

  onSubmit() {
    if (this.registrationForm.valid) {
      console.log('Форма отправлена', this.registrationForm.value);
    }
  }
}

<!-- user-registration.component.html -->
<form [formGroup]="registrationForm" (ngSubmit)="onSubmit()">
  <div>
    <label>Email:</label>
    <input type="email" formControlName="email">
    <div *ngIf="registrationForm.get('email')?.invalid && registrationForm.get('email')?.touched">
      Введите корректный email
    </div>
  </div>
  <div>
    <label>Пароль:</label>
    <input type="password" formControlName="password">
  </div>
  <button type="submit" [disabled]="!registrationForm.valid">Зарегистрироваться</button>
</form>