没有“exportAs”设置为“ngForm”的指令

Question

我已经包括了FormsModule，但它显示了我的错误。

\n\n

There is no directive with \xe2\x80\x9cexportAs\xe2\x80\x9d set to \xe2\x80\x9cngForm\xe2\x80\x9d \n

\n\n

我的 Login.component.ts ：-

\n\n

import { Component } from \'@angular/core\';\nimport { Http, Response , RequestOptions , Headers , URLSearchParams } from \'@angular/http\';\nimport {FormsModule} from \'@angular/forms\';\n\n@Component({\n    templateUrl: \'./login.component.html\'\n})\n\nexport class LoginComponent {\n    apiRoot : String = "http://httpbin.org";\n    // search code starts here\n\n    // data = string;\n    constructor(private http: Http){\n\n    }\n    onSubmit(value){\n\n        let name = value.name;\n        let password = value.password;\n        let url = `${this.apiRoot}/post`;\n        this.http.post(url, {name:name,password:password}).subscribe(res => console.log(res.json()));\n        console.log(\'submit\');\n\n    }\n\n\n}\n

\n\n

我的login.module.ts：-

\n\n

import { BrowserModule } from \'@angular/platform-browser\';\nimport { NgModule } from \'@angular/core\';\n\nimport { jqxGridComponent } from \'jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid\';\nimport { AppComponent } from \'./../../app.component\';\nimport { FormsModule, ReactiveFormsModule , FormGroup} from \'@angular/forms\';\nimport { HttpModule } from \'@angular/http\';\nimport { LoginComponent } from \'./login.component\';\n\n@NgModule({\n  declarations: [\n      AppComponent, jqxGridComponent, LoginComponent\n  ],\n  imports: [\n    BrowserModule,\n    FormsModule,\n    HttpModule,\n    ReactiveFormsModule\n\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class LoginModule { }  \n

\n\n

我的login.component.html

\n\n

<div class="">\n  <form (ngSubmit)="onSubmit(heroForm.value)" #heroForm="ngForm">\n      <input type="text" name="name" [(ngModel)]="name" />\n      <input type="password" name="password" [(ngModel)]="password" />\n      <br/>\n       <input type="checkbox" name="vehicle" value="Bike" [(ngModel)]="vehicle"> I have a bike<br>\n         <input type="checkbox" name="vehicle" value="Car" > I have a car<br>\n      <button type="submit">Send</button>\n  </form>\n</div>\n

\n\n

我尝试制作新的 Angular 项目，它适用于主 app.module.ts、app.component.ts 和 app.component.html 文件，但当我尝试使用登录文件时，它不起作用。

\n\n

我是 Angular-5 的新手，所以当我们创建新的登录模块时，我可能遗漏了一些东西。

\n\n

编辑 ：-

\n\n

应用程序组件：-

\n\n

app.component.ts \n\nimport { Component, OnInit } from \'@angular/core\';\nimport { Router, NavigationEnd } from \'@angular/router\';\n\n@Component({\n  // tslint:disable-next-line\n  selector: \'body\',\n  template: \'<router-outlet></router-outlet>\'\n})\nexport class AppComponent implements OnInit {\n  constructor(private router: Router) { }\n\n  ngOnInit() {\n    this.router.events.subscribe((evt) => {\n      if (!(evt instanceof NavigationEnd)) {\n        return;\n      }\n      window.scrollTo(0, 0)\n    });\n  }\n}\n

\n\n

应用程序模块.ts

\n\n

import { BrowserModule } from \'@angular/platform-browser\';\nimport { BrowserAnimationsModule } from \'@angular/platform-browser/animations\';\nimport { NgModule } from \'@angular/core\';\nimport { LocationStrategy, HashLocationStrategy } from \'@angular/common\';\nimport { FormsModule, ReactiveFormsModule } from \'@angular/forms\';\nimport { HttpModule } from \'@angular/http\';\nimport { AppComponent } from \'./app.component\';\n// Import containers\nimport {\n  FullLayoutComponent,\n  SimpleLayoutComponent\n} from \'./containers\';\n\nconst APP_CONTAINERS = [\n  FullLayoutComponent,\n  SimpleLayoutComponent\n]\n\n// Import components\nimport {\n  AppAsideComponent,\n  AppBreadcrumbsComponent,\n  AppFooterComponent,\n  AppHeaderComponent,\n  AppSidebarComponent,\n  AppSidebarFooterComponent,\n  AppSidebarFormComponent,\n  AppSidebarHeaderComponent,\n  AppSidebarMinimizerComponent,\n  APP_SIDEBAR_NAV\n} from \'./components\';\n\nconst APP_COMPONENTS = [\n  AppAsideComponent,\n  AppBreadcrumbsComponent,\n  AppFooterComponent,\n  AppHeaderComponent,\n  AppSidebarComponent,\n  AppSidebarFooterComponent,\n  AppSidebarFormComponent,\n  AppSidebarHeaderComponent,\n  AppSidebarMinimizerComponent,\n  APP_SIDEBAR_NAV\n]\n\n// Import directives\nimport {\n  AsideToggleDirective,\n  NAV_DROPDOWN_DIRECTIVES,\n  ReplaceDirective,\n  SIDEBAR_TOGGLE_DIRECTIVES\n} from \'./directives\';\n\nconst APP_DIRECTIVES = [\n  AsideToggleDirective,\n  NAV_DROPDOWN_DIRECTIVES,\n  ReplaceDirective,\n  SIDEBAR_TOGGLE_DIRECTIVES\n]\n\n// Import routing module\nimport { AppRoutingModule } from \'./app.routing\';\n\n// Import 3rd party components\nimport { ChartsModule } from \'ng2-charts/ng2-charts\';\nimport { BsDropdownModule } from \'ngx-bootstrap/dropdown\';\nimport { ModalModule } from \'ngx-bootstrap\';\nimport { TabsModule } from \'ngx-bootstrap/tabs\';\n\n@NgModule({\n  imports: [\n    BrowserModule,\n    BrowserAnimationsModule,\n    AppRoutingModule,\n    ChartsModule,\n    HttpModule,\n    FormsModule,\n    ReactiveFormsModule,\n    BsDropdownModule.forRoot(),\n    ModalModule.forRoot(),\n    TabsModule.forRoot(),\n  ],\n  declarations: [\n    AppComponent,\n    ...APP_CONTAINERS,\n    ...APP_COMPONENTS,\n    ...APP_DIRECTIVES\n  ],\n  providers: [{\n    provide: LocationStrategy,\n    useClass: HashLocationStrategy\n  }],\n  bootstrap: [ AppComponent ]\n})\nexport class AppModule { }\n

\n\n

我的登录页面是我在视图文件夹下创建的文件。\n来自的路径app。

\n\n

视图/pages/login.component.html\nviews/pages/login.component.ts\nviews/pages/login.module.ts

\n

Answer 1

与Angular 6 / 7 / 8出现同样的错误，只需删除 #
heroForm="ngForm 即可解决