Angular 2错误 - 没有指令将“exportAs”设置为“ngModel”与RC4版本

Question

我在我的应用程序中使用了角度2表单，并且我基于给定链接创建了表单。

https://angular.io/docs/ts/latest/guide/forms.html

在此进行验证和使用形式的API，我已经设置了ngModel值一样#name="id" #id="ngModel"并抛出脚本错误。但是，如果我将#id="ngModel"设置为#id="ngForm"，则可以解决问题。但对于我的情况，我必须将我的模型值设置为ngModel。

以下是我的html页面。

<form (ngSubmit)="onSubmit()" #myForm="ngForm"> 
    <div class="form-group"> 
    <label class="control-label" for="id">Employee ID</label> 
    <input type="text" class="form-control" required [(ngModel)]="model.id" #name="id" #id="ngModel" > 
    <div [hidden]="id.valid || id.pristine" class="alert alert-danger"> 
     Employee ID is required 
    </div> 
    </div> 
    <div class="form-group"> 
    <label for="name">Employee Name</label> 
    <input type="text" class="form-control" [(ngModel)]="model.name" name="name" #name="ngModel" required> 
     <div [hidden]="name.valid || name.pristine" class="alert alert-danger"> 
     Employee ID is required 
     </div> 
    </div> 
    <div class="form-group"> 
    <label for="DOJ">DOJ</label> 
    <input class="form-control" required [(ngModel)]="model.DOJ" name="DOJ" #DOJ="ngModel" /> 
    <div [hidden]="DOJ.valid || DOJ.pristine" class="alert alert-danger"> 
     DOJ is required 
    </div> 
    </div> 
    <button type="submit" class="btn btn-default" [disabled]="!myForm.form.valid">Submit</button> 
</form> 

以下是我的问题。

 EXCEPTION: Template parse errors: 
     There is no directive with "exportAs" set to "ngModel" (" 
     <div> 
      <h1>My Form</h1> 
      <form (ngSubmit)="onSubmit()" [ERROR ->]#myForm="ngModel"> 
      <div class="form-group> 
      <label class="control-label" for="id">Employee"):AppComponent@3:34 

我有更多的问题和答案检查，他们大多表示，更新angular2版本RC4，所以我已经更新我的应用程序RC4但还是我面临这个问题。

下面是我的TS文件：

import {Component} from '@angular/core'; 
import { disableDeprecatedForms, provideForms , NgForm} from '@angular/forms'; 
import {CORE_DIRECTIVES, FORM_DIRECTIVES, FormBuilder,Validators,Control,ControlGroup } from '@angular/common'; 


@Component({ 
selector: 'ej-app',  
templateUrl: 'app/app.component.html', 
directives: [ CORE_DIRECTIVES,FORM_DIRECTIVES] 
}) 
    export class AppComponent { 
    model = new Employees(null,'',''); 
    onSubmit() { alert("values submitted")} 
    constructor() { 
    } 
    } 
     export class Employees { 
     constructor(public id: number,public name: string, public DOJ: String) { } 
} 

Answer 1

不要混用新旧形式的模块。

import {CORE_DIRECTIVES, FORM_DIRECTIVES, FormBuilder,Validators,Control,ControlGroup } from '@angular/common'; 

进口形式从@angular/common东西。如果使用新的形式

bootstrap(AppComponent, [disableDeprecatedForms(), provideForms()]) 

然后改用

import {FORM_DIRECTIVES, FormBuilder,Validators,Control,ControlGroup } from '@angular/forms'; 

Answer 2

不导入FORM_DIRECTIVES和CORE_DIRECTIVES，因为他们已被弃用，而不是确保导入NgForm。您可以使用以下方法：

import {FormGroup, FormBuilder, FormControl, Validators, NgForm } from '@angular/forms';