Ошибка Angular 2 - отсутствует директива с «exportAs», установленным в «ngModel» с версией RC4

Я использую угловые 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"):[email protected]: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 ) {  }
}
 Günter Zöchbauer03 авг. 2016 г., 07:10
Вы включили новые формыdisableDeprecatedForms(), provideForms() и убедитесь, что вы не импортируете вещи из форм@angular/common?
 Sasi Dhivya03 авг. 2016 г., 07:18
Я отредактировал свой вопрос и добавил ts файлы. Можете ли вы проверить это. В этом я импортировал disableDeprecatedForms, предоставить формы

Ответы на вопрос(2)

Решение Вопроса

Не смешивайте новый и старый модуль форм.

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';
 Günter Zöchbauer03 авг. 2016 г., 07:30
#name="id"  должно бытьname="id"
 Günter Zöchbauer03 авг. 2016 г., 07:33
Трудно сказать. Вы можете воспроизвести в Plunker?
 Sasi Dhivya03 авг. 2016 г., 07:31
я тоже тоже отредактировал
 Sasi Dhivya03 авг. 2016 г., 08:14
 Sasi Dhivya03 авг. 2016 г., 07:33
Извините, я новый плункер. Я создал ссылку, но я не могу сделать ее как runnbale. Можете ли вы проверить эту ссылку. Я добавил все необходимые файлы.plnkr.co/edit/90nftuu6Paa5BG0qRYtl?p=preview
 Günter Zöchbauer03 авг. 2016 г., 07:46
plnkr.co/edit/mwiQ2K0u3IgsbGHFFWvn?p=preview, Я исправил тег<my-app> в index.html, измененоid.valid а такжеid.pristine вempid.valid а такжеempid.pristine и добавил, послеtemplateUrl вapp.component.ts.
 Sasi Dhivya03 авг. 2016 г., 07:39
plnkr.co/edit/uk0Mw07v4KqTMYdstlIP?p=preview Можете ли вы проверить это
 Sasi Dhivya03 авг. 2016 г., 08:05
Работает хорошо, спасибо lottttttttttttttt
 Günter Zöchbauer03 авг. 2016 г., 07:35
Ты можешь использоватьangular.io/resources/live-examples/quickstart/ts/plnkr.html как шаблон. Чтобы получить файлы в подпапках, просто добавьте имя папки в качестве префикса к имени файла, напримерapp/my.component.ts Шаблон является ссылкой «живой пример» вверхуangular.io/docs/ts/latest/quickstart.html
 Sasi Dhivya03 авг. 2016 г., 07:27
ошибка сценария: ИСКЛЮЧЕНИЕ: ошибка в app / app.component.html: 7: 13 platform-browser.umd.js: 1900 ИСКЛЮЧЕНИЕ: ошибка в app / app.component.html: 7: 13BrowserDomAdapter.logError @ platform-browser.umd .js. BrowserDomAdapter.logError @ platform-browser.umd.js: 1900 platform-browser.umd.js: 1900 TypeError: Невозможно прочитать свойство 'valid' из неопределенного в DebugAppView._View_AppCompo
 Sasi Dhivya03 авг. 2016 г., 07:25
Я изменил, как показано ниже: 'import {disableDeprecatedForms, provideForms, NgForm} из' @ angular / forms '; импортировать {CORE_DIRECTIVES} из '@ angular / common'; import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} из '@ angular / forms'; ' Но теперь я новая ошибка скрипта

Не импортироватьFORM_DIRECTIVES а такжеCORE_DIRECTIVES потому что они устарели, убедитесь, что вы импортируетеNgForm, Вы можете использовать следующее:

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

Ваш ответ на вопрос