I know this topic was discussed so much, but still I cannot resolve my current problem.

So here is part of my component code:

@Component({
    selector:'edit-product',
    templateUrl: './edit-product.component.html'
})

export class EditProductComponent implements OnInit, OnDestroy{

    constructor(private productService: ProductService,
                private formBuilder: FormBuilder) {
                    this.createProductModel = {Name: '', Price: 0, Quantity: 0}
                }

    editProductForm: FormGroup;
    createProductModel: ICreateProductModel

 ngOnInit(): void {
        this.editProductForm = this.formBuilder.group({
            productName: ['Enter product name', [Validators.required, Validators.maxLength(50)]],
            productPrice: ['Enter product price', [Validators.required, Validators.min(0)]],
            productQuantity: ['Enter product quantity', [Validators.required, Validators.min(0)]]
        })
    }

Here is part of my template:

div>
  <form [formGroup]="editProductForm">
    <label for="productName">Product Name</label>
    <input type="text" id="productName" name="productName" formControlName="productName">
    <span *ngIf="productName?.errors?.['required']">This field is mandatory<br></span>
    <span *ngIf="productName?.errors?.['maxlength']">You exceeded 50 characters for this field<br></span>

Also in my AppModule I have the following imports:

import { FormsModule, ReactiveFormsModule } from '@angular/forms'; and their declaration inside "Imports".

Currently, I get this error: "Can't bind to 'formGroup' since it isn't a known property of 'form'. " and honestly I cannot see my mistake. Everything is the same as my other components/ templates. The proper imports are in the module... Am I missing something?

Edit -> AppModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import {HttpClientModule} from '@angular/common/http'

import { AppComponent } from './app.component';
import { LoginFormComponent } from './login/login-form.component';
import { NavigationBarComponent } from './shared/navigationBar/navigation-bar.component';

import { UserListComponent } from './users/listUsers/users-list.component';
import { EditUserComponent } from './users/editUsers/edit-user.component';
import { RegisterUserComponent } from './users/registerUsers/register-user.component';
import { EditLoggedUserComponent } from './users/editLoggedUser/edit-loggeduser.component';
import { ProductListComponent } from './products/listProducts/product-list.component';
import { AdminProductsMenuComponent } from './products/adminProductsMenu/admin-productsMenu.component';
import { CreateProductComponent } from './products/createProducts/create-product.component';

import { CommonModule } from '@angular/common';
import { MatNativeDateModule } from '@angular/material/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatIconModule } from '@angular/material/icon';
import { MatSelectModule } from '@angular/material/select';
import { MatRadioModule } from '@angular/material/radio';
import { MatButtonModule } from '@angular/material/button';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { EditProductComponent } from './products/editProduct/edit-product.component';

@NgModule({
  declarations: [
    AppComponent,
    NavigationBarComponent,
    LoginFormComponent,
    UserListComponent,
    EditUserComponent,
    RegisterUserComponent,
    EditLoggedUserComponent,
    ProductListComponent,
    AdminProductsMenuComponent,
    CreateProductComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      {path: 'Home', component: NavigationBarComponent},
      {path: 'Login', component: LoginFormComponent},
      {path: 'Users', component: UserListComponent},
      {path: 'EditUser', component: EditUserComponent},
      {path: 'Register', component: RegisterUserComponent},
      {path: 'EditLoggedUser', component: EditLoggedUserComponent},
      {path: 'Products', component: ProductListComponent},
      {path: 'AdminProducts', component: AdminProductsMenuComponent},
      {path: 'CreateProduct', component: CreateProductComponent},
      {path: 'EditProduct', component: EditProductComponent}
    ]),
    FormsModule,
    HttpClientModule,
    ReactiveFormsModule,
        CommonModule,
        MatTableModule,
        MatSortModule,
        MatFormFieldModule,
        MatInputModule,
        MatDatepickerModule,
        MatNativeDateModule,
        MatIconModule,
        MatSelectModule,
        MatRadioModule,
        MatButtonModule,
    
  ],
  exports: [
    CommonModule,
    MatTableModule,
    MatSortModule,
    MatFormFieldModule,
    MatInputModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatIconModule,
    MatSelectModule,
    MatRadioModule,
    MatButtonModule
],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

CodePudding user response：

You haven't included the EditProductComponent in your declaration. If it's in another module then you need to export the ReactiveFormsModule.

exports: [..., ReactiveFormsModule]

If not add your component EditProductComponent in the declaration

CodePudding user response：

please add EditProductComponent in declaration of the module it will solve asap