title: Angular 9 - Can't bind to 'formGroup' since it isn't a known property of 'form'
body: <p>My code environment is Angular 9, and when I set up reactive form, I met this error:</p>
  
  <blockquote>
    <p>error NG8002: Can't bind to 'formGroup' since it isn't a known
    property of 'form'. </p>
  </blockquote>
  
  <p>I did some researches in Google and StackOverflow, but can't find the same questions with using Angular 9, however, based on other posts suggestions, I do import ReactiveFormsModule into app.module.ts, routing.module.ts and also recipe-edit.component.spec.ts files. However, the error keeps popping up. I attach my code, and somebody could give me suggestions?</p>
  
  <p>app.module.ts</p>
  
  <pre><code>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';
  import { 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,
      RecipeListComponent,
      RecipeItemComponent,
      RecipeDetailComponent,
      HeaderComponent,
      ShoppingListComponent,
      ShoppingEditComponent,
      DropdownDirective
    ],
    imports: [
      BrowserModule,
      FormsModule,
      ReactiveFormsModule,
      RoutingModule
    ],
    providers: [ShoppingListService, RecipeService],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>routing.module.ts</p>
  
  <pre><code>import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  import { RecipeStartComponent } from './recipes/recipe-start/recipe-start.component';
  import { RecipeDetailComponent } from './recipes/recipe-detail/recipe-detail.component';
  import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  
  import { ShoppingListComponent } from './shopping-list/shopping-list.component';
  import { RecipesComponent } from './recipes/recipes.component';
  import { RecipeEditComponent } from './recipes/recipe-edit/recipe-edit.component';
  
  const routes: Routes = [
    {path: '', redirectTo: '/recipes', pathMatch: 'full'},
    {path: 'recipes', component: RecipesComponent, children: [
      {path: '', component: RecipeStartComponent},
      {path: 'new', component: RecipeEditComponent},
      {path: ':id', component: RecipeDetailComponent},
      {path: ':id/edit', component: RecipeEditComponent}
    ]},
    {path: 'shopping-list', component: ShoppingListComponent}
    ];
  @NgModule({
    imports: [RouterModule.forRoot(routes), FormsModule, ReactiveFormsModule],
    exports: [RouterModule]
  })
  export class RoutingModule {}
  </code></pre>
  
  <p>recipe-edit.component.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { ActivatedRoute, Params } from '@angular/router';
  import { FormGroup, FormControl } from '@angular/forms';
  
  import { RecipeService } from './../recipe.service';
  
  @Component({
    selector: 'app-recipe-edit',
    templateUrl: './recipe-edit.component.html',
    styleUrls: ['./recipe-edit.component.css']
  })
  export class RecipeEditComponent implements OnInit {
    id: number;
    editMode = false;
    recipeForm: FormGroup;
  
    constructor(private route: ActivatedRoute, private recipeService: RecipeService) { }
  
    ngOnInit() {
      this.route.params
        .subscribe(
          (paras: Params) =&gt; {
            this.id = +paras.id;
            this.editMode = paras.id != null;
            this.initForm();
          }
        );
    }
  
    private initForm() {
      let name = '';
      let imagePath = '';
      let description = '';
  
      if (this.editMode) {
        const editRecipe = this.recipeService.getRecipe(this.id);
        name = editRecipe.name;
        imagePath = editRecipe.imagePath;
        description = editRecipe.desc;
      }
  
      this.recipeForm = new FormGroup({
        name: new FormControl(name),
        imagePath: new FormControl(imagePath),
        description: new FormControl(description)
      });
    }
  
    onSubmit() {
      console.log(this.recipeForm);
    }
  }
  </code></pre>
  
  <p>recipe-edit.component.html</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-xs-12"&gt;
      &lt;form (ngSubmit) = "onSubmit()" [formGroup] = "recipeForm" &gt;
        &lt;div class="row"&gt;
          &lt;div class="col-xs-12"&gt;
            &lt;button class="btn btn-success" type = "submit"&gt; Save &lt;/button&gt;
            &lt;button class="btn btn-danger" type = "button"&gt; Cancel &lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-xs-12"&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="name"&gt; Recipe Name&lt;/label&gt;
              &lt;input
                type = "text"
                id = "name"
                formControlName="name"
                class="form-control"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-xs-12"&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="imagePath"&gt; Image URL &lt;/label&gt;
              &lt;input
                type = "text"
                id = "imagePath"
                formControlName="imagePath"
                class="form-control"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-xs-12"&gt;
            &lt;img src="" class="img-reponsive"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-xs-12"&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="description"&gt; Description &lt;/label&gt;
              &lt;textarea
                type = "text"
                id = "description"
                formControlName="description"
                class="form-control"
                rows = "6"&gt;&lt;/textarea&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-xs-12"&gt;
            &lt;div class="row"&gt;
              &lt;div class="col-xs-8"&gt;
                &lt;input
                  type = "text"
                  class = "form-control"&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-2"&gt;
                  &lt;input
                  type = "number"
                  class = "form-control"&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-2"&gt;
                &lt;button class="btn btn-danger" type = "button"&gt; X &lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>recipe-edit.component.spec.ts</p>
  
  <pre><code>import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  
  import { RecipeEditComponent } from './recipe-edit.component';
  import { ReactiveFormsModule, FormsModule } from '@angular/forms';
  
  describe('RecipeEditComponent', () =&gt; {
    let component: RecipeEditComponent;
    let fixture: ComponentFixture&lt;RecipeEditComponent&gt;;
  
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        declarations: [ RecipeEditComponent ],
        imports: [ReactiveFormsModule, FormsModule]
      })
      .compileComponents();
    }));
  
    beforeEach(() =&gt; {
      fixture = TestBed.createComponent(RecipeEditComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });
  
    it('should create', () =&gt; {
      expect(component).toBeTruthy();
    });
  });
  </code></pre>