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';