NG8003：错误 NG8003：没有找到 exportAs 'ngForm' 的指令答案

【问题标题】：NG8003: error NG8003: No directive found with exportAs 'ngForm'NG8003：错误 NG8003：没有找到 exportAs 'ngForm' 的指令
【发布时间】：2021-05-24 02:38:26
【问题描述】：

我遇到了问题在我的第一个项目 angular 11 上找不到与 exportAs 'ngForm' 相关的指令。我已经在 app.module.ts 中导入了 FormsModule 和 ReactiveFormsModule，但我仍然收到此错误。这是我的代码：

这是我的 product.component.html 代码：

 <form #tambahBuku='ngForm' (ngSubmit)="onSubmit(addBook.value)">
          <div class="form-group">
            <label for="">Title Book :</label>
            <input type="text" class="form-control col-5" name=title placeholder="Title Book">
          </div>
          <div class="form-group">
            <label for="">Author :</label>
            <input type="text" class="form-control col-5" name=author placeholder="Book Author">
          </div>
          <div class="form-group">
            <label for="">Price :</label>
            <input type="text" class="form-control col-5" name=price placeholder="Book Price">             
          </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
    </form>

这是我的 product.component.ts 代码

    import { Component, OnInit } from '@angular/core';



@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {

  ngOnInit(): void {

  }

  onSubmit(data){
    alert ("book "+data.title+'submited')
  }
}

这是我的 app.module.ts 代码

import { BrowserModule } from '@angular/platform-browser';
...
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

// Material design
import { MaterialDesign } from './material/material.module';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    RegisterComponent,
  ],
  imports: [
    BrowserModule,
    ...
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

【问题讨论】：

标签： angular typescript forms angular11

【解决方案1】：

您的 Product 组件似乎未在您导入所需“FormsModule”的 AppModule 中声明。您需要在声明产品组件的模块中导入此“FormsModule”。

【讨论】：

【解决方案2】：

如果 ProductComponent 在不同的 FeatureModule 中声明，而不是直接在 AppModule 中声明，则此模块还需要导入 FormsModule。

【讨论】：

感谢您的帮助，问题现已解决。