typescript Angular 2 错误- RC4 版本没有将“exportAs”设置为“ngModel”的指令
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38734684/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 2 error- There is no directive with "exportAs" set to "ngModel" with RC4 version
提问by Sasi Dhivya
I am using angular 2 forms in my application and i have created the forms based on given link.
我在我的应用程序中使用了 angular 2 表单，并且我已经根据给定的链接创建了表单。
https://angular.io/docs/ts/latest/guide/forms.html
https://angular.io/docs/ts/latest/guide/forms.html
In this for validation and to use forms APIs, i have set the ngModelvalues like #name="id" #id="ngModel"and which throws script error. But its resolved if i set #id="ngModel"as #id="ngForm". But for my case i have to set my model value to ngModel.
在这个用于验证和使用表单 API 的过程中，我设置了ngModel类似#name="id" #id="ngModel"和抛出脚本错误的值。但如果我设置 #id="ngModel"为#id="ngForm". 但就我而言，我必须将模型值设置为ngModel.
Below is my html page.
下面是我的 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>
Below is my issue.
下面是我的问题。
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
I have checked with more questions and answers, most of them said to update angular2 version to RC4so i have updated my application to rc4 but still i am facing this issue.
我已经检查了更多的问题和答案，他们中的大多数人都说要将 angular2 版本更新为，RC4所以我已将我的应用程序更新为 rc4，但我仍然面临这个问题。
Below is my ts file:
下面是我的 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 ) { }
}
采纳答案by Günter Z?chbauer
Don't mix the new and old forms module.
不要混合使用新旧表单模块。
import {CORE_DIRECTIVES, FORM_DIRECTIVES, FormBuilder,Validators,Control,ControlGroup } from '@angular/common';
imports forms stuff from @angular/common. If you use the new forms
从@angular/common. 如果您使用新表格
bootstrap(AppComponent, [disableDeprecatedForms(), provideForms()])
then use instead
然后改用
import {FORM_DIRECTIVES, FormBuilder,Validators,Control,ControlGroup } from '@angular/forms';
回答by Mwiza
Do not import the FORM_DIRECTIVESand CORE_DIRECTIVESbecause they are deprecated, instead make sure that you import the NgForm. You can use the following:
不要导入FORM_DIRECTIVESandCORE_DIRECTIVES因为它们已被弃用，而是确保导入NgForm. 您可以使用以下内容：
import {FormGroup, FormBuilder, FormControl, Validators, NgForm } from '@angular/forms';
