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

Question

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

There is no directive with “exportAs” set to “ngForm” 

我的Login.component.ts :-

import { Component } from '@angular/core';
import { Http, Response , RequestOptions , Headers , URLSearchParams } from '@angular/http';
import {FormsModule} from '@angular/forms';

@Component({
    templateUrl: './login.component.html'
})

export class LoginComponent {
    apiRoot : String = "http://httpbin.org";
    // search code starts here

    // data = string;
    constructor(private http: Http){

    }
    onSubmit(value){

        let name = value.name;
        let password = value.password;
        let url = `${this.apiRoot}/post`;
        this.http.post(url, {name:name,password:password}).subscribe(res => console.log(res.json()));
        console.log('submit');

    }


}

我的login.module.ts :-

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { jqxGridComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid';
import { AppComponent } from './../../app.component';
import { FormsModule, ReactiveFormsModule , FormGroup} from '@angular/forms';
import { HttpModule } from '@angular/http';
import { LoginComponent } from './login.component';

@NgModule({
  declarations: [
      AppComponent, jqxGridComponent, LoginComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    ReactiveFormsModule

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class LoginModule { }  

我的login.component.html

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

我尝试制作新的angular项目，它可以处理主app.module.ts、app.component.ts和app.component.html文件，但当我尝试处理登录文件时，它不起作用。

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

编辑:-

应用组件:-

app.component.ts 

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

@Component({
  // tslint:disable-next-line
  selector: 'body',
  template: '<router-outlet></router-outlet>'
})
export class AppComponent implements OnInit {
  constructor(private router: Router) { }

  ngOnInit() {
    this.router.events.subscribe((evt) => {
      if (!(evt instanceof NavigationEnd)) {
        return;
      }
      window.scrollTo(0, 0)
    });
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
// Import containers
import {
  FullLayoutComponent,
  SimpleLayoutComponent
} from './containers';

const APP_CONTAINERS = [
  FullLayoutComponent,
  SimpleLayoutComponent
]

// Import components
import {
  AppAsideComponent,
  AppBreadcrumbsComponent,
  AppFooterComponent,
  AppHeaderComponent,
  AppSidebarComponent,
  AppSidebarFooterComponent,
  AppSidebarFormComponent,
  AppSidebarHeaderComponent,
  AppSidebarMinimizerComponent,
  APP_SIDEBAR_NAV
} from './components';

const APP_COMPONENTS = [
  AppAsideComponent,
  AppBreadcrumbsComponent,
  AppFooterComponent,
  AppHeaderComponent,
  AppSidebarComponent,
  AppSidebarFooterComponent,
  AppSidebarFormComponent,
  AppSidebarHeaderComponent,
  AppSidebarMinimizerComponent,
  APP_SIDEBAR_NAV
]

// Import directives
import {
  AsideToggleDirective,
  NAV_DROPDOWN_DIRECTIVES,
  ReplaceDirective,
  SIDEBAR_TOGGLE_DIRECTIVES
} from './directives';

const APP_DIRECTIVES = [
  AsideToggleDirective,
  NAV_DROPDOWN_DIRECTIVES,
  ReplaceDirective,
  SIDEBAR_TOGGLE_DIRECTIVES
]

// Import routing module
import { AppRoutingModule } from './app.routing';

// Import 3rd party components
import { ChartsModule } from 'ng2-charts/ng2-charts';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { ModalModule } from 'ngx-bootstrap';
import { TabsModule } from 'ngx-bootstrap/tabs';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    ChartsModule,
    HttpModule,
    FormsModule,
    ReactiveFormsModule,
    BsDropdownModule.forRoot(),
    ModalModule.forRoot(),
    TabsModule.forRoot(),
  ],
  declarations: [
    AppComponent,
    ...APP_CONTAINERS,
    ...APP_COMPONENTS,
    ...APP_DIRECTIVES
  ],
  providers: [{
    provide: LocationStrategy,
    useClass: HashLocationStrategy
  }],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

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

views/pages/login.component.html视图/pages/login.Component.ts视图/pages/login.module.ts

Answer 1

这是node_module的错误。

我刚刚更新了节点包，它正在工作。因为@angular/core没有正确导入。

因此，我已经在sublime-3中安装了typescript包，

import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule , FormGroup} from '@angular/forms';

因此，在获取节点文件时出现了一些问题。

Answer 2

与Angular 6/7/ 8有相同的错误，只需删除#即可解决

heroForm="ngForm将起作用

Answer 3

以防它对某些人不起作用，还有一件事需要注意。当我从另一个项目中复制并粘贴到我的项目中时，我也遇到了同样的问题，我忘记了在按钮中更改名称。

请确保以下事项：

1)在app.module.ts中导入FormsModule

import { FormsModule, ReactiveFormsModule , FormGroup} from '@angular/forms';
imports: [
   FormsModule,
],

2)在您的html中，确保按钮中的#projectForm='ngForm‘和相同的名称(即projectForm)

<form (ngSubmit)="onSubmit()" #projectForm="ngForm" class="form-horizontal">
. . .
. . .
. . .
<button type="submit" class="btn btn-success" [disabled]="!projectForm.form.valid">
        <i class="fa fa-floppy-o" aria-hidden="true"></i> Save
    </button>