Angular2错误：没有指令“exportAs”设置为“ngForm”

我在RC4，我得到的错误有没有指令“exportAs”设置为“ngForm”，因为我的模板：

<div class="form-group"> <label for="actionType">Action Type</label> <select ngControl="actionType" ===> #actionType="ngForm" id="actionType" class="form-control" required> <option value=""></option> <option *ngFor="let actionType of actionTypes" value="{{ actionType.label }}"> {{ actionType.label }} </option> </select> </div> 

boot.ts：

 import {disableDeprecatedForms, provideForms} from '@angular/forms'; import {bootstrap} from '@angular/platform-browser-dynamic'; import {HTTP_PROVIDERS, Http} from '@angular/http'; import {provideRouter} from '@angular/router'; import {APP_ROUTER_PROVIDER} from './routes'; import {AppComponent} from './app.component'; bootstrap(AppComponent, [ disableDeprecatedForms(), provideForms(), APP_ROUTER_PROVIDER, HTTP_PROVIDERS]); 

///所以这里是我的DropdownList：

 <fieldset ngControlGroup="linkedProcess" > <div ngControlGroup="Process" > <label>Linked Process</label> <div class="form-group"> <select ngModel name="label" #label="ngModel" id="label" class="form-control" required (change)="reloadProcesse(list.value)" #list> <option value=""></option> <!--<option value=`{{ActionFormComponent.getFromString('GET'')}}`></option>--> <option *ngFor="let processus of linkedProcess?.processList?.list; let i = index" value="{{ processus[i].Process.label}}"> {{processus.Process.label}} </option> </select> </div> </div> 

//我的组件ts：

我用这样的旧forms代表它：

  categoryControlGroups:ControlGroup[] = []; categories:ControlArray = new ControlArray(this.categoryControlGroups); 

现在我正在这样做：

 categoryControlGroups:FormGroup[] = []; categories:FormArray = new FormArray(this.categoryControlGroups); 

你认为这是问题的原因？

Answer 1

从2.0.0.rc6开始 ：

表单 ：已弃用的provideForms()和disableDeprecatedForms()函数已被删除。 请FormsModule从@angular/forms导入FormsModule或ReactiveFormsModule 。

简而言之，如果您使用模板驱动的表单 ，请将FormsModule添加到您的@NgModule 。 如果您使用模型驱动的表单，请将ReactiveFormsModule添加到您的@NgModule 。

所以， 添加到您的app.module.ts或等效：

 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, FormsModule, // <========== Add this line! ReactiveFormsModule // <========== Add this line! ], declarations: [ AppComponent // other components of yours ], bootstrap: [ AppComponent ] }) export class AppModule { } 

没有这些模块中的一个可能导致错误，包括您所面对的错误：

无法绑定到“ngModel”，因为它不是“input”的已知属性。

无法绑定到“formGroup”，因为它不是“form”的已知属性

“exportAs”没有设置为“ngForm”的指令

如果您有疑问， 可以同时提供 FormsModule和ReactiveFormsModule ，但是它们是分开的。 当您提供这些模块中的一个时，该模块的默认表单指令和提供程序将在应用程序范围内提供给您。

---

使用ngControl旧表单？

如果你的@NgModule有这些模块，也许你正在使用旧的指令，如ngControl ，这是一个问题，因为在新的表单中没有ngControl 。 它被ngModel 或多或less地replace了 *。

例如，与<input ngControl="actionType">等价的是<input ngModel name="actionType"> ，所以在模板中改变它。

同样，控件中的导出不再是ngForm ，现在是ngModel 。 所以，在你的情况下，用#actionType="ngForm"replace#actionType="ngForm" #actionType="ngModel" 。

所以得到的模板应该是（ ===>在哪里改变）：

 <div class="form-group"> <label for="actionType">Action Type</label> <select ===> ngModel ===> name="actionType" ===> #actionType="ngModel" id="actionType" class="form-control" required> <option value=""></option> <option *ngFor="let actionType of actionTypes" value="{{ actionType.label }}"> {{ actionType.label }} </option> </select> </div> 

*或多或less，因为不是ngControl所有functionngControl被移动到ngModel 。 有些刚刚被删除或现在不同。 一个例子是name属性，你现在正在使用的情况。

Answer 2

我面临同样的问题。 我错过了app.module.ts中的表单模块导入标签

 import { FormsModule } from '@angular/forms'; @NgModule({ imports: [BrowserModule, FormsModule ], 

Answer 3

我遇到了同样的问题，通过将FormsModule添加到.spec.ts来解决：

 import { FormsModule } from '@angular/forms'; 

然后将导入添加到beforeEach：

 beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ FormsModule ], declarations: [ YourComponent ] }) .compileComponents(); })); 

Answer 4

现在在Angular2中正确的使用方式是：

 <form (ngSubmit)="onSubmit()"> <label>Username:</label> <input type="text" class="form-control" [(ngModel)]="user.username" name="username" #username="ngModel" required /> <label>Contraseña:</label> <input type="password" class="form-control" [(ngModel)]="user.password" name="password" #password="ngModel" required /> <input type="submit" value="Entrar" class="btn btn-primary"/> </form> 

旧的方式不再有效