![没有带有]( "没有带有")
本文介绍了Angular2 错误:没有带有“exportAs"的指令；设置为“ngForm"的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在 RC4 上遇到错误 由于我的模板，没有将exportAs"设置为ngForm"的指令:
<label for="actionType">动作类型</label><选择ngControl =动作类型"===>#actionType="ngForm"id="动作类型"类=形式控制"需要><option value=""></option><option *ngFor="let actionType of actionTypes" value="{{ actionType.label }}">{{ actionType.label }}</选项></选择>
boot.ts :
import {disableDeprecatedForms, provideForms} from '@angular/forms';从@angular/platform-browser-dynamic"导入 {bootstrap}；从@angular/http"导入 {HTTP_PROVIDERS, Http}；从@angular/router"导入{provideRouter}；从'./routes'导入{APP_ROUTER_PROVIDER}；从 './app.component' 导入 {AppComponent}；bootstrap(AppComponent, [disableDeprecatedForms(), provideForms(), APP_ROUTER_PROVIDER, HTTP_PROVIDERS]);
///所以这是我的 DropdownList :
<div ngControlGroup="进程" ><label>链接进程</label><div class="form-group"><选择模型名称=标签"#label="ngModel"id="标签"class="form-control" 需要(change)="reloadProcesse(list.value)"#列表><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}}</选项></选择>
//我的组件 ts :
我用这样的旧形式来表示它:
categoryControlGroups:ControlGroup[] = [];类别:ControlArray = new ControlArray(this.categoryControlGroups);
现在我正在这样做:
categoryControlGroups:FormGroup[] = [];类别:FormArray = new FormArray(this.categoryControlGroups);
你认为这是问题的原因吗??
解决方案
自从 2.0.0.rc6:
forms:不推荐使用的 provideForms() 和 disableDeprecatedForms() 函数已被删除.请改为从 @angular/forms 导入 FormsModule 或 ReactiveFormsModule.
简而言之:
因此，添加到您的 app.module.ts 或等效项:
import { NgModule } from '@angular/core';从'@angular/platform-browser' 导入 { BrowserModule };从@angular/forms"导入 { FormsModule, ReactiveFormsModule };//<== 添加导入！从 './app.component' 导入 { AppComponent };@NgModule({进口:[浏览器模块，FormsModule,//<========== 添加这一行！ReactiveFormsModule//<========== 添加这一行！],声明: [应用组件//你的其他组件],引导程序:[ AppComponent ]})导出类 AppModule { }
如果没有这些模块之一可能会导致错误，包括您面临的错误:
无法绑定到ngModel"，因为它不是input"的已知属性.
无法绑定到formGroup"，因为它不是form"的已知属性
没有带有exportAs"的指令；设置为ngForm"
如果你有疑问，你可以同时提供 FormsModule 和 ReactiveFormsModule ，但它们分别是全功能的.当您提供这些模块之一时，该模块中的默认表单指令和提供程序将可供您在整个应用范围内使用.
使用 ngControl 的旧表单?
如果您的 @NgModule 中确实有这些模块，那么您可能正在使用旧指令，例如 ngControl，这是一个问题，因为没有 ngControl 在新表单中.它或多或少*被ngModel取代.
例如，等价于
同样，控件中的导出不再是ngForm，现在是ngModel.因此，在您的情况下，将 #actionType=ngForm" 替换为 #actionType=ngModel".
所以生成的模板应该是 (===>s where changed):
<label for="actionType">动作类型</label><选择===>模型===>名称=动作类型"===>#actionType=ngModel"id=动作类型"类=表单控制"需要><选项值="></option><option *ngFor="let actionType of actionTypes";值={{ actionType.label }}">{{ actionType.label }}</选项></选择>
* 或多或少是因为并非 ngControl 的所有功能都被转移到 ngModel.有些刚刚被删除或现在不同了.一个例子是 name 属性，这就是您现在遇到的情况.
i'm on the RC4 and i'm getting the error There is no directive with "exportAs" set to "ngForm" because of my template :
<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>
the 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]);
/// so here is my 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>
//my component ts :
i was representing it in the old forms like this :
categoryControlGroups:ControlGroup[] = [];
categories:ControlArray = new ControlArray(this.categoryControlGroups);
and now i'm doing this :
categoryControlGroups:FormGroup[] = [];
categories:FormArray = new FormArray(this.categoryControlGroups);
you think it's the cause of the prob ??
解决方案
Since 2.0.0.rc6:
In short:
So, add to your app.module.ts or equivalent:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; // <== add the imports!
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 { }
Failing to have one of these modules can lead to errors, including the one you face:
If you're in doubt, you can provide both the FormsModule and the ReactiveFormsModule together, but they are fully-functional separately. When you provide one of these modules, the default forms directives and providers from that module will be available to you app-wide.
Old Forms using ngControl?
If you do have those modules at your @NgModule, perhaps you are using old directives, such as ngControl, which is a problem, because there's no ngControl in the new forms. It was replaced more or less* by ngModel.
For instance, the equivalent to <input ngControl="actionType"> is <input ngModel name="actionType">, so change that in your template.
Similarly, the export in controls is not ngForm anymore, it is now ngModel. So, in your case, replace #actionType="ngForm" with #actionType="ngModel".
So the resulting template should be (===>s where changed):
<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>
* More or less because not all functionality of ngControl was moved to ngModel. Some just were removed or are different now. An example is the name attribute, the very case you are having right now.
这篇关于Angular2 错误:没有带有“exportAs"的指令；设置为“ngForm"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！