Ошибка "Can't bind to 'formGroup' since it isn't a known property of 'form'" в Angular

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

Ошибка возникает из-за того, что Angular не знает о директиве formGroup. Эта директива находится в модуле ReactiveFormsModule, который необходимо импортировать в ваш модуль (обычно AppModule или модуль, где зарегистрирован компонент).

В Angular реактивные формы не работают "из коробки" — нужно явно указать, что вы хотите их использовать. Без импорта ReactiveFormsModule Angular не распознаёт атрибут [formGroup] и выбрасывает ошибку.

Решение

Добавьте импорт ReactiveFormsModule в ваш модуль. Обычно это app.module.ts. Вот исправленный код:

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms'; // <-- Импортируем модуль

import { AppComponent } from './app.component';
import { MyFormComponent } from './my-form/my-form.component';

@NgModule({
  declarations: [
    AppComponent,
    MyFormComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule // <-- Добавляем в imports
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

После этого перезапустите сервер разработки (обычно достаточно сохранить файл, но если не помогло — перезапустите ng serve). Ошибка должна исчезнуть.

Почему это работает?

• ReactiveFormsModule предоставляет директивы для работы с реактивными формами: formGroup, formControlName, formArrayName и другие.
• Без этого модуля Angular не знает, как обрабатывать атрибут [formGroup] в шаблоне.
• Если вы используете шаблонные формы (с ngModel), то импортируется FormsModule. Для реактивных форм — ReactiveFormsModule.

Дополнительные советы

• Убедитесь, что ваш компонент объявлен в том же модуле, куда вы добавили ReactiveFormsModule. Если компонент находится в другом модуле (например, в FeatureModule), импортируйте ReactiveFormsModule и туда.
• Если вы используете standalone-компоненты (Angular 14+), можно импортировать модуль прямо в компоненте:

// my-form.component.ts (standalone)
import { Component } from '@angular/core';
import { ReactiveFormsModule, FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-my-form',
  standalone: true,
  imports: [ReactiveFormsModule], // <-- Импорт в компоненте
  templateUrl: './my-form.component.html'
})
export class MyFormComponent {
  myForm = new FormGroup({
    name: new FormControl(''),
    email: new FormControl('')
  });
}

Теперь ваша реактивная форма будет работать корректно. Если ошибка осталась — проверьте, не опечатались ли вы в названии директивы (должно быть formGroup, а не formgroup или form-group).

// feature.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { MyFormComponent } from './my-form.component';

@NgModule({
  declarations: [MyFormComponent],
  imports: [CommonModule, ReactiveFormsModule]
})
export class FeatureModule { }