Angular 4：模板解析错误：＆＃34; exportAs＆＃34;没有指令设置为＆＃34; ngForm＆＃34;

Question

尝试从offical doc

学习angular4中的表单处理

但是我在控制台中遇到以下错误

  

模板解析错误：＆＃34; exportAs＆＃34;没有指令调成   ＆＃34; ngForm＆＃34;

看起来像angular2中的表单模块导入问题，但我已将其导入到我的`component.ts文件

    import { FormsModule,ReactiveFormsModule } from '@angular/forms';
    @NgModule({
      imports: [
             CommonModule,
             FormsModule ,
             BrowserModule,
             ReactiveFormsModule     
        ]
    })
   export class FormsComponent implements OnInit {

  constructor() { }

  powers = ['Really Smart', 'Super Flexible',
            'Super Hot', 'Weather Changer'];

  model = new Items(18, 'Dr IQ', this.powers[0], 'Chuck Overstreet');

  submitted = false;

  onSubmit() { this.submitted = true; }          
}

在html中

<form #heroForm="ngForm">
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" [(ngModel)]="model.name"  class="form-control" id="name" required>
      </div>

<form>