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

Решение: импортируйте ReactiveFormsModule в ваш модуль

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

Вот как это исправить:

1. Откройте файл вашего модуля (например, app.module.ts)
2. Импортируйте ReactiveFormsModule из @angular/forms
3. Добавьте его в массив imports

Пример исправленного модуля:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms'; // <-- импорт

import { AppComponent } from './app.component';
import { RegisterComponent } from './register/register.component';

@NgModule({
  declarations: [
    AppComponent,
    RegisterComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule // <-- добавьте сюда
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

После этого компонент с [formGroup] будет работать корректно.

Почему это происходит?

Angular использует модульную систему. Директивы, пайпы и компоненты должны быть либо объявлены в текущем модуле, либо импортированы из других модулей. ReactiveFormsModule содержит все необходимые директивы для реактивных форм: formGroup, formControlName, formArrayName и другие. Без его импорта Angular просто не знает о существовании этих директив и выбрасывает ошибку.

Альтернатива: Template-driven формы

Если вы используете template-driven формы (с директивами ngModel), то вам понадобится FormsModule вместо ReactiveFormsModule. Но для вашего случая с [formGroup] нужен именно ReactiveFormsModule.

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

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

import { Component } from '@angular/core';
import { ReactiveFormsModule, FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-register',
  standalone: true,
  imports: [ReactiveFormsModule], // <-- для standalone
  template: `...`
})
export class RegisterComponent { }

После импорта модуля ошибка исчезнет, и ваша форма будет работать как ожидалось.

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 // <-- для template-driven форм
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

<form #myForm="ngForm">
  <input name="email" ngModel placeholder="Email">
  <input name="password" ngModel type="password" placeholder="Пароль">
  <button type="submit">Зарегистрироваться</button>
</form>