title: NG8002: Can't bind to 'formGroup' since it isn't a known property of 'form'
body: <p>there is a lot about this subject in the WEB but none of the solutions I've seen solved my problem.</p>
  <p>For context I have a project that has the top level module app.module and a sub module called product.module.</p>
  <p>Inside the sub module I have a component that is using Reactive forms.</p>
  <p>I have imported <code>ReactiveFormsModule</code> in both of the module files:</p>
  <p>Basically I have my app.module.ts file:</p>
  <p>Add-Product.component.ts</p>
  <pre><code>        &lt;div class=&quot;card&quot; &gt;
              &lt;div class=&quot;card-header buttons-space&quot;&gt;
                  &lt;h3 *ngIf=&quot;editMode == false&quot;&gt;Add Category&lt;/h3&gt;
                  &lt;h3 *ngIf=&quot;editMode == true&quot;&gt;Edit Category&lt;/h3&gt;
                  &lt;div class=&quot;createButtons&quot;&gt;
                &lt;button class=&quot;btn btn-dark ml-3&quot;&gt;&lt;i class=&quot;bi bi-box-arrow-left&quot;&gt;&lt;/i&gt;Reset&lt;/button&gt;
              &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;card-body&quot;&gt;
                  &lt;div class=&quot;container&quot;&gt;
                      &lt;div class=&quot;row&quot;&gt;
                        &lt;form [formGroup]=&quot;productFormGroup&quot; (ngSubmit)=&quot;uploadProducts()&quot;&gt;
                          &lt;div class=&quot;mb-3&quot;&gt;
                              &lt;label for=&quot;productname&quot; class=&quot;form-label&quot;&gt;Product Name&lt;/label&gt;
                              &lt;input type=&quot;text&quot; class=&quot;form-control&quot; formControlName=&quot;productname&quot; name=&quot;categoryname&quot; placeholder=&quot;&quot; required&gt;
                            &lt;/div&gt;
                            &lt;div class=&quot;mb-3&quot;&gt;
                              &lt;label for=&quot;description&quot; class=&quot;form-label&quot;&gt;Description&lt;/label&gt;
                              &lt;input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;description&quot; formControlName=&quot;description&quot; placeholder=&quot;&quot; required&gt;
                            &lt;/div&gt;
                            &lt;div class=&quot;mb-3&quot;&gt;
                              &lt;label for=&quot;details&quot; class=&quot;form-label&quot;&gt;Details&lt;/label&gt;
                              &lt;input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;details&quot; formControlName=&quot;details&quot; placeholder=&quot;&quot; required&gt;
                            &lt;/div&gt;
                            &lt;div class=&quot;mb-3&quot;&gt;
                              &lt;label for=&quot;price&quot; class=&quot;form-label&quot;&gt;Price&lt;/label&gt;
                              &lt;input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;price&quot; formControlName=&quot;price&quot; placeholder=&quot;&quot; required&gt;
                            &lt;/div&gt;
                            &lt;div class=&quot;mb-3&quot;&gt;
                              &lt;label for=&quot;quantity&quot; class=&quot;form-label&quot;&gt;quantity&lt;/label&gt;
                              &lt;input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;quantity&quot; formControlName=&quot;quantity&quot; placeholder=&quot;&quot; required&gt;
                            &lt;/div&gt;
                            &lt;div class=&quot;mb-3&quot;&gt;
                              &lt;button class=&quot;btn btn-primary&quot; *ngIf=&quot;editMode == false&quot;&gt;Submit&lt;/button&gt;
                              &lt;button class=&quot;btn btn-primary&quot; *ngIf=&quot;editMode == true&quot; &gt;Update&lt;/button&gt;
                              &lt;button class=&quot;btn btn-dark ml-1&quot; routerLink=&quot;/category&quot;&gt;Cancle&lt;/button&gt;
                            &lt;/div&gt;
                        &lt;/form&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <p>add-Product-component.ts</p>
  <pre><code>import { HttpClient } from '@angular/common/http';
  import { Component, OnInit } from '@angular/core';
  import { FormBuilder, FormGroup, Validators } from '@angular/forms';
  import { ProductService } from '../product.service';
  
  @Component({
    selector: 'app-product-form',
    templateUrl: './product-form.component.html',
    styleUrls: ['./product-form.component.scss']
  })
  export class ProductFormComponent implements OnInit {
    productFormGroup!:FormGroup
    editMode:boolean = false;
    constructor(private fb:FormBuilder, private psrv:ProductService, private _http:HttpClient) { }
  
    ngOnInit(): void {
    this.AddProducts();
    }
    private AddProducts(){
      this.productFormGroup = this.fb.group({
        productname :['', Validators.required],
        descrition:['', Validators.required],
        details:['', Validators.required],
        quantity:['', Validators.required],
        price:['', Validators.required]
      })
    }
    uploadProducts(){
      if(this.editMode = true){
      this._http.post&lt;any&gt;('http://localhost:3000/products', 
      this.productFormGroup.value).subscribe(res=&gt;{
        console.log(res)
      })
    }else{
    }
    }
  }
  </code></pre>
  <p>app.module.ts</p>
  <pre><code>import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { CommonModule } from '@angular/common';
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  import { CommonComponent } from './common/common.component';
  import { ReactiveFormsModule } from '@angular/forms';
  import { HttpClientModule } from '@angular/common/http';
  import { FormsModule } from '@angular/forms';
  import { AddProductsComponent } from './pages/add-products/add-products.component';
  import { ProductsComponent } from './pages/products/products.component';
  
  @NgModule({
    declarations: [
      AppComponent,
      CommonComponent,
      ProductsComponent,
      AddProductsComponent
      ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      CommonModule,
      ReactiveFormsModule,
      HttpClientModule,
      FormsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>