沒有明顯問題跡象的formGroup錯誤

我知道這個話題被討論了很多，但我仍然無法解決我當前的問題。

所以這是我的組件代碼的一部分：

@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)]]
        })
    }

這是我的模板的一部分：

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>

同樣在我的 AppModule 中，我有以下匯入：

從'@angular/forms'匯入 { FormsModule, ReactiveFormsModule }；以及他們在“Imports”中的宣告。

目前，我收到此錯誤：“無法系結到 'formGroup'，因為它不是 'form' 的已知屬性。”老實說，我看不出我的錯誤。一切都與我的其他組件/模板相同。正確的匯入在模塊中......我錯過了什么嗎？

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

uj5u.com熱心網友回復：

您尚未EditProductComponent在宣告中包含 。如果它在另一個模塊中，那么您需要匯出ReactiveFormsModule.

exports: [..., ReactiveFormsModule]

如果沒有EditProductComponent在宣告中添加您的組件

uj5u.com熱心網友回復：

請在模塊宣告中添加 EditProductComponent 它將盡快解決

標籤：有角度的打字稿

上一篇：如何在打字稿中說“這個只讀記錄的值之一”？

下一篇：如何從Angular組件中洗掉index.html中的腳本標簽