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

Question

我正在使用angular 2 typescript.我在模板中使用ngform时遇到麻烦。模板解析错误：没有指令将" Extortas"设置为" NG形式"(" Col-XS-12 Col-SM-10 Col-Md-8 Col-Md-8 Col-SM-SM-SM-SM-SM-SM-SM-MD-MD-FORKSET-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
]