Ошибка formGroup в Angular: как исправить за 5 минут

Онлайн-тренажер Python для начинающих

Изучайте Python легко и без перегрузки теорией. Решайте практические задачи с автоматической проверкой, получайте подсказки на русском языке и пишите код прямо в браузере — без необходимости что-либо устанавливать.

Начать курс

«Can't bind to 'formGroup' since it isn't a known property of 'form'» — знакомая боль?

Если вы когда-нибудь пытались создать форму в Angular и увидели в консоли браузера красную надпись Can't bind to 'formGroup' since it isn't a known property of 'form' — вы не одиноки. Эта ошибка входит в топ-5 самых частых вопросов на Stack Overflow по Angular. Тысячи разработчиков (и я в том числе) теряли часы, пытаясь понять, что пошло не так.

Хорошая новость: причина почти всегда одна, и исправляется она за 2 минуты. Плохая новость: если не знать, куда смотреть, можно переписать всю форму и так и не найти корень зла.

В этой статье мы разберём:

Почему возникает ошибка formGroup unknown property
Как правильно импортировать ReactiveFormsModule
Три способа исправить ошибку с примерами кода на TypeScript
Как избежать проблемы в будущем

Поехали! 🚀

Что означает ошибка «Can't bind to 'formGroup'»?

Angular — фреймворк строгой типизации. Когда вы пишете в шаблоне:

<form [formGroup]="myForm">

Angular ищет директиву, которая умеет обрабатывать атрибут formGroup. Если такая директива не найдена, фреймворк выдаёт ошибку: «Can't bind to 'formGroup' since it isn't a known property of 'form'».

Это похоже на ситуацию, когда вы пытаетесь вставить USB в порт, но не той стороной. Вроде бы всё подходит, но контакты не совпадают. Angular просто не знает, что делать с formGroup, потому что нужный модуль не подключён.

Главная причина: отсутствует ReactiveFormsModule

Директива formGroup живёт в модуле ReactiveFormsModule. Если вы его не импортировали в ваш AppModule (или в модуль, где используется компонент), Angular не сможет распознать атрибут.

Вот как выглядит типичный сценарий ошибки:

Вы создаёте компонент с формой
В TypeScript определяете FormGroup
В шаблоне используете [formGroup]="myForm"
Получаете ошибку в консоли

Как исправить: полный пример кода на TypeScript

Давайте пошагово создадим работающую форму и разберём каждый шаг.

Шаг 1. Создаём компонент с формой

Сначала определим форму в TypeScript-файле компонента:

// my-form.component.ts
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['./my-form.component.css']
})
export class MyFormComponent implements OnInit {
  myForm!: FormGroup;

  ngOnInit(): void {
    this.myForm = new FormGroup({
      name: new FormControl('', Validators.required),
      email: new FormControl('', [Validators.required, Validators.email])
    });
  }

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

Шаг 2. Правильный шаблон (HTML)

В шаблоне используем директиву formGroup:

<!-- my-form.component.html -->
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <div>
    <label for="name">Имя:</label>
    <input id="name" type="text" formControlName="name">
  </div>

  <div>
    <label for="email">Email:</label>
    <input id="email" type="email" formControlName="email">
  </div>

  <button type="submit" [disabled]="!myForm.valid">Отправить</button>
</form>

Шаг 3. Импорт ReactiveFormsModule (самое важное!)

Теперь ключевой момент. Откройте app.module.ts и добавьте импорт ReactiveFormsModule:

// 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  // <-- ДОБАВЬТЕ СЮДА
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Важно: Если ваш компонент находится в отдельном модуле (например, FeatureModule), импортировать ReactiveFormsModule нужно именно в тот модуль, где объявлен компонент.

Три способа исправить ошибку formGroup

В зависимости от архитектуры вашего приложения, вы можете выбрать один из трёх подходов:

Способ 1: Импорт в AppModule (для небольших проектов)

Подходит, если всё приложение использует один модуль. Просто добавьте ReactiveFormsModule в imports массива @NgModule.

Способ 2: Импорт в FeatureModule (для модульной архитектуры)

Если вы используете ленивую загрузку или модульную структуру, импортируйте ReactiveFormsModule в каждый модуль, где есть формы:

// feature.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';

import { FeatureComponent } from './feature.component';

@NgModule({
  declarations: [FeatureComponent],
  imports: [
    CommonModule,
    ReactiveFormsModule  // обязательно
  ]
})
export class FeatureModule { }

Способ 3: Использование FormsModule (для Template-driven форм)

Если вы используете template-driven подход (с ngModel), импортируйте FormsModule вместо ReactiveFormsModule. Но для formGroup нужен именно ReactiveFormsModule!