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

Ошибка возникает, когда Angular не может найти директиву ngModel в текущем модуле или компоненте. Хотя вы правильно импортировали FormsModule в AppModule, есть несколько скрытых нюансов, которые могут вызвать эту проблему.

Основные причины:

• Отсутствие импорта FormsModule — самая частая причина, но в вашем случае он есть.
• Использование Standalone компонентов — если вы используете Angular 14+ и создали компонент как standalone, FormsModule нужно импортировать непосредственно в компонент.
• Проблемы с версией Angular — в очень старых версиях (2.x) ngModel мог отсутствовать.
• Конфликт модулей — если компонент объявлен в другом модуле, где FormsModule не импортирован.

Пошаговое решение

Шаг 1: Проверьте структуру модулей

Убедитесь, что ваш компонент действительно зарегистрирован в том модуле, где импортирован FormsModule. В вашем случае всё верно. Но если у вас есть Feature Module (например, NotesModule), то FormsModule нужно импортировать и туда:

// notes.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { NotesComponent } from './notes.component';

@NgModule({
  declarations: [NotesComponent],
  imports: [CommonModule, FormsModule],
  exports: [NotesComponent]
})
export class NotesModule { }

Шаг 2: Для Standalone компонентов (Angular 14+)

Если ваш компонент объявлен как standalone, FormsModule нужно импортировать непосредственно в него:

// app.component.ts (standalone)
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, FormsModule], // <-- обязательно
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  noteTitle: string = '';
}

Шаг 3: Проверьте синтаксис шаблона

Убедитесь, что вы используете правильный синтаксис для двустороннего связывания. Есть два варианта:

• Короткий синтаксис: [(ngModel)]="property" — для полной двусторонней привязки.
• Длинный синтаксис: [ngModel]="property" (ngModelChange)="property = $event" — для раздельного контроля.

Шаг 4: Очистите кэш и перезапустите

Иногда Angular CLI кэширует старые данные. Выполните команду:

ng serve --delete-output-path

Или вручную удалите папки .angular/cache и node_modules/.cache.

Полный рабочий пример

Вот минимальный рабочий код, который гарантированно работает:

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <input [(ngModel)]="name" placeholder="Введите имя">
    <p>Привет, {{ name }}!</p>
  `
})
export class AppComponent {
  name: string = '';
}

Если после всех этих шагов ошибка остаётся, проверьте версию Angular в package.json — она должна быть 2.0.0 или выше. Для Angular 2+ ngModel всегда доступен при импорте FormsModule.

// app.module.ts
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [ReactiveFormsModule] // вместо FormsModule
})
export class AppModule { }

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  template: `
    <input [formControl]="titleControl" placeholder="Название">
    <p>Значение: {{ titleControl.value }}</p>
  `
})
export class AppComponent implements OnInit {
  titleControl = new FormControl('');

  ngOnInit() {
    // Подписка на изменения
    this.titleControl.valueChanges.subscribe(value => {
      console.log('Новое значение:', value);
    });
  }
}