Angular 9 - Can't Bind To 'formgroup' Since It Isn't A Known Property Of 'form'

My code environment is Angular 9, and when I set up reactive form, I met this error: error NG8002: Can't bind to 'formGroup' since it isn't a known property of 'form'. I did s

Solution 1:

If the RecipeEditComponent belongs to AppModule, you need to declare the RecipeEditComponent in app.module.ts:

import { RecipeService } from'./recipes/recipe.service';
import { BrowserModule } from'@angular/platform-browser';
import { NgModule } from'@angular/core';
import { FormsModule, ReactiveFormsModule} from'@angular/forms';

import { RoutingModule } from'./routing.module';
import { ShoppingListService } from'./shopping-list/shopping-list.service';
import { AppComponent } from'./app.component';
// Add following line:import { RecipeEditComponent } from'./recipes/recipe-edit/recipe-edit.component'; // add thisimport { RecipesComponent } from'./recipes/recipes.component';
import { RecipeListComponent } from'./recipes/recipe-list/recipe-list.component';
import { RecipeItemComponent } from'./recipes/recipe-list/recipe-item/recipe-item.component';
import { RecipeDetailComponent } from'./recipes/recipe-detail/recipe-detail.component';
import { HeaderComponent } from'./header/header.component';
import { ShoppingListComponent } from'./shopping-list/shopping-list.component';
import { ShoppingEditComponent } from'./shopping-list/shopping-edit/shopping-edit.component';
import { DropdownDirective } from'./shared/dropdown.directive';

@NgModule({
  declarations: [
    AppComponent,
    RecipesComponent,
    RecipeEditComponent, // add this and the import lineRecipeListComponent,
    RecipeItemComponent,
    RecipeDetailComponent,
    HeaderComponent,
    ShoppingListComponent,
    ShoppingEditComponent,
    DropdownDirective
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    RoutingModule
  ],
  providers: [ShoppingListService, RecipeService],
  bootstrap: [AppComponent]
})
exportclassAppModule { }

Otherwise if it belongs to another module, you need to import FormsModule and ReactiveFormsModule in the module which it belongs to.

Solution 2:

you need to import FormsModule and ReactiveFormsModule in the module which it belongs to.

import {ReactiveFormsModule, FormsModule } from '@angular/forms';

Solution 3:

Need to import following in app.module.ts file:

import { FormsModule, ReactiveFormsModule } from'@angular/forms';

formGroup is a selector for the directive named FormGroupDirective which is part of ReactiveFormsModule, is used to bind FormGroup data to a component element.

Then add it in imports array of the module like the following:

imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule
],providers: [],bootstrap: [AppComponent]
})exportclassAppModule { }

Solution 4:

import { FormsModule, ReactiveFormsModule} from'@angular/forms';

make sure to import at the top of your app.module.ts