Błąd Angular 2 - Nie ma dyrektywy z "exportAs" ustawionym na "ngModel" z RC4 w wersji

Question

Używam w formularzu kątowym 2 formularze i utworzyłem formularze na podstawie podanego linku.

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

W ten walidacji i użyć formy API, mam ustawić wartości ngModel jak #name="id" #id="ngModel" i który rzuca błąd skryptu. Ale zostanie rozwiązany, jeśli ustawię #id="ngModel" jako #id="ngForm". Ale w moim przypadku muszę ustawić moją wartość modelu na ngModel.

Poniżej znajduje się moja strona 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> 

Poniżej znajduje się mój problem.

 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 

Sprawdziłem więcej pytań i odpowiedzi, większość z nich powiedział do aktualizacji angular2 wersję do RC4 więc mam zaktualizowany mój wniosek do RC4, ale nadal jestem w obliczu tego problemu.

Poniżej jest mój plik 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

Nie mieszaj nowych i starych form moduł.

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

importuje rzeczy z formularzy od @angular/common. W przypadku korzystania z nowych form

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

następnie użyć zamiast

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

Answer 2

Nie importować FORM_DIRECTIVES i CORE_DIRECTIVES ponieważ są przestarzałe, zamiast upewnić się, że import NgForm. Można użyć następujących:

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