there is a lot about this subject in the WEB but none of the solutions I've seen solved my problem.

For context I have a project that has the top level module app.module and a sub module called product.module.

Inside the sub module I have a component that is using Reactive forms.

I have imported ReactiveFormsModule in both of the module files:

Basically I have my app.module.ts file:

Add-Product.component.ts

        <div  >
            <div >
                <h3 *ngIf="editMode == false">Add Category</h3>
                <h3 *ngIf="editMode == true">Edit Category</h3>
                <div >
              <button ><i ></i>Reset</button>
            </div>
            </div>
            <div >
                <div >
                    <div >
                      <form [formGroup]="productFormGroup" (ngSubmit)="uploadProducts()">
                        <div >
                            <label for="productname" >Product Name</label>
                            <input type="text"  formControlName="productname" name="categoryname" placeholder="" required>
                          </div>
                          <div >
                            <label for="description" >Description</label>
                            <input type="text"  name="description" formControlName="description" placeholder="" required>
                          </div>
                          <div >
                            <label for="details" >Details</label>
                            <input type="text"  name="details" formControlName="details" placeholder="" required>
                          </div>
                          <div >
                            <label for="price" >Price</label>
                            <input type="text"  name="price" formControlName="price" placeholder="" required>
                          </div>
                          <div >
                            <label for="quantity" >quantity</label>
                            <input type="text"  name="quantity" formControlName="quantity" placeholder="" required>
                          </div>
                          <div >
                            <button  *ngIf="editMode == false">Submit</button>
                            <button  *ngIf="editMode == true" >Update</button>
                            <button  routerLink="/category">Cancle</button>
                          </div>
                      </form>
                    </div>
                  </div>
            </div>
          </div>
    </div>

add-Product-component.ts

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<any>('http://localhost:3000/products', 
    this.productFormGroup.value).subscribe(res=>{
      console.log(res)
    })
  }else{
  }
  }
}

app.module.ts

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 { }

CodePudding user response：

Change the declaration of the from like this:

 export class ProductFormComponent implements OnInit {
  editMode:boolean = false;

  productFormGroup = this.fb.group({
      productname :['', Validators.required],
      descrition:['', Validators.required],
      details:['', Validators.required],
      quantity:['', Validators.required],
      price:['', Validators.required]
  })

  ... code ....
 }

Remove the declaration from the AddProduct method.