Angular 10开发主详情表单遇NgForm的NG6002错误求助

Hey there, let's break down this error you're facing. The core issue here is super straightforward: NgForm is a directive, not an Angular module, so it doesn't belong in the imports array of your AppModule.

Why the error happens #

When you add NgForm to the imports array, Angular tries to treat it as an NgModule—which it isn't. The FormsModule you already have in your imports is actually the module that provides the NgForm directive, so you don't need to import NgForm separately at the module level.

Step-by-step fix #

1. Remove NgForm from AppModule's imports
   Open your app.module.ts and take out NgForm from the imports array. Your corrected imports should look like this:

   [ BrowserModule, AppRoutingModule, DataTablesModule, HttpClientModule, FormsModule, RouterModule, ReactiveFormsModule, BrowserAnimationsModule, ToastrModule.forRoot() ]
   

2. Ensure NgForm is imported in your component (if needed)
   In your materialrequisition.ts component, you're using NgForm in the resetForm method—just make sure you have the import statement at the top of the file:

   import { NgForm } from '@angular/forms';
   

   That's all you need to use it in your component's logic.

3. Fix template typo (optional but important)
   Your template had a mismatched closing tag (</div> instead of </form>)—here's the corrected version (the #form="ngForm" usage itself is totally valid):

   <form #form="ngForm" autocomplete="off" *ngIf="service.formData">
     <input [(ngModel)]="service.formData.materialRequisitionNo" class="form-control">
   </form>
   

Quick recap #

• Only Angular modules (like FormsModule, ReactiveFormsModule) belong in the imports array of your AppModule
• Directives/Pipes (like NgForm) are imported directly in the components where you use them
• FormsModule already includes everything required for template-driven forms, including NgForm and ngModel

内容的提问来源于stack exchange，提问作者Suman Roshan