错误：没有将“exportAs”设置为“ng-form”的指令

Question

我正在使用 angular 2 typescript。在我的模板中使用 ngForm 时遇到问题。其他文件工作正常，但是当我在 localhost 中打开注册文件时，控制台中出现错误，因为 模板解析错误： 没有将“exportAs”设置为“ng-form”的指令（“”col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2"> ]#f="ng-form"> 我的 register.component.html 文件

 <div class="row">
<div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
<form (ngSubmit)="onSignup(f)" #f="ngForm">
  <div class="form-group">
    <input
    ngModel
     type="email"
     id="email"
     name="email"

     class="form-control"
     required>
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input
    ngModel
      type="password"
      id="password"
      name="password"
      ngModel
      class="form-control"
      required>
  </div>
  <button class="btn btn-primary" type="submit" [disabled]="!f.valid">Sign Up</button>
</form>
</div>
</div>`

我的 register.component.ts 文件

import { Component, OnInit } from '@angular/core';
 import { FormsModule, NgForm, NgModel, ReactiveFormsModule } from '@angular/forms';


@Component({

templateUrl: 'register.component.html',

})
export class RegisterComponent implements OnInit {


constructor() { }


ngOnInit(){}

onSignup(form: NgForm) {
 const email = form.value.email;
 const password = form.value.password;

 }


 }

app.component.ts 文件

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

@Component({
// tslint:disable-next-


selector: 'body',
template: '<router-outlet></router-outlet>'
})
export class AppComponent implements OnInit {
title = 'app';

constructor(){

}

ngOnInit(){}


} 

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ApplicationRef, NgModule } from '@angular/core';
import { HashLocationStrategy, LocationStrategy } from '@angular/common';
import { CommonModule } from '@angular/common';
import { FormsModule, NgModel, NgForm, ReactiveFormsModule } from '@angular/forms';
import { DropdownModule } from 'ng2-bootstrap/dropdown';
import { TabsModule } from 'ng2-bootstrap/tabs';
import { ChartsModule } from 'ng2-charts/ng2-charts';
import { AppComponent } from './app.component';

import { NAV_DROPDOWN_DIRECTIVES } from './shared/nav-dropdown.directive';
import { SIDEBAR_TOGGLE_DIRECTIVES } from './shared/sidebar.directive';
import { AsideToggleDirective } from './shared/aside.directive';
import { BreadcrumbsComponent } from './shared/breadcrumb.component';
import { AppRoutingModule } from './app.routing';
import { FullLayoutComponent } from './layouts/full-layout.component';
import { SimpleLayoutComponent } from './layouts/simple-layout.component';

@NgModule({

declarations: [

AppComponent,

FullLayoutComponent,
SimpleLayoutComponent,
NAV_DROPDOWN_DIRECTIVES,
BreadcrumbsComponent,
SIDEBAR_TOGGLE_DIRECTIVES,
AsideToggleDirective,



 ],
imports: [
BrowserModule,
AppRoutingModule,
DropdownModule.forRoot(),
TabsModule.forRoot(),
ChartsModule,
CommonModule,
FormsModule,
ReactiveFormsModule,
  ],

providers: [{
provide: LocationStrategy,
useClass: HashLocationStrategy
 }],
bootstrap: [ AppComponent ] 
})
export class AppModule { }

任何帮助将不胜感激。谢谢。

Answer 1

尝试在模块中导入：

import { NgForm, FormsModule, ReactiveFormsModule } from '@angular/forms';

并添加@NgModule...

imports: [
    FormsModule,
    ReactiveFormsModule
]