Angular2 Error: There is no directive with "exportAs" set to "ngForm"

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 ??

190509 次浏览
小开
最佳答案

自 2.0.0. rc6以来:

表格 : 废弃的 provideForms()和 disableDeprecatedForms()功能已被删除。请从 @angular/forms导入 FormsModule或 ReactiveFormsModule。

简而言之:

因此，add to your app.module.ts或相当于:

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 { }

没有这些模块中的一个可能会导致错误，包括您面临的错误:

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

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

There is no directive with "exportAs" set to "ngForm"

如果您有疑问，你可以两者兼顾的 FormsModule和 ReactiveFormsModule一起，但他们是完全功能分开。当您提供这些模块之一时，该模块的默认表单指令和提供程序将在应用程序范围内可用。

使用 ngControl的旧表单？

如果在 @NgModule中有这些模块，那么可能使用的是旧的指令，比如 ngControl，这是一个问题，因为新表单中没有 ngControl。它被 ngModel取代了 差不多吧 * 。

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

类似地，控件中的导出不再是 ngForm，现在是 ngModel。因此，在您的情况下，将 #actionType="ngForm"替换为 #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>

* 或多或少是因为并非所有的 ngControl功能都转移到了 ngModel。有些只是被移除了，或者现在不同了。一个例子是 name属性，就是您现在正在处理的案例。

小开

我遇到了同样的问题，我错过了 app.module.ts 中的 Forms 模块导入标记

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


@NgModule({
imports: [BrowserModule,
FormsModule
],
小开

我遇到了同样的问题，这个问题通过将 FormsModule 添加到. spec.ts 中得到了解决:

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

然后将 import 添加到 before each:

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

The correct way of use forms now in Angular2 is:

<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>

老办法不管用了

小开

I had this problem because I had a typo in my template near [(ngModel)]]. Extra bracket. Example:

<input id="descr" name="descr" type="text" required class="form-control width-half"
[ngClass]="{'is-invalid': descr.dirty && !descr.valid}" maxlength="16" [(ngModel)]]="category.descr"
[disabled]="isDescrReadOnly" #descr="ngModel">
小开

在我的情况下，我不得不把 FormsModule和 ReactiveFormsModule加入到 shared.module.ts中:

(感谢@Undrium 的 代码示例) :

import { NgModule }                                 from '@angular/core';
import { CommonModule }                             from '@angular/common';
import { FormsModule, ReactiveFormsModule }         from '@angular/forms';


@NgModule({
imports:      [
CommonModule,
ReactiveFormsModule
],
declarations: [],
exports: [
CommonModule,
FormsModule,
ReactiveFormsModule
]
})
export class SharedModule { }
小开

我遇到了这个问题，我意识到我没有把我的组件绑定到一个变量上。

变了

<input #myComponent="ngModel" />

到

<input #myComponent="ngModel" [(ngModel)]="myvar" />

小开

检查您的 select 中是否同时具有 ngModel and name属性。此外 Select 是一个表单组件，而不是整个表单，因此本地引用的更多逻辑声明将是:-

<div class="form-group">
<label for="actionType">Action Type</label>
<select
ngControl="actionType"
===>  #actionType="ngModel"
ngModel    // You can go with 1 or 2 way binding as well
name="actionType"
id="actionType"
class="form-control"
required>
<option value=""></option>
<option *ngFor="let actionType of actionTypes" value="\{\{ actionType.label }}">
\{\{ actionType.label }}
</option>
</select>
</div>

还有一件重要的事情是，确保在模板驱动方法的情况下导入 FormsModule，或者在反应方法的情况下导入 ReactiveFormsModule。或者你可以同时导入两者，这也是完全可以的。

小开

如果你得到的是这个:

错误: 模板解析错误:

没有将“ exportAs”设置为“ 模特”的指令

这是 被报道为 Github 的一个漏洞，那么可能它不是一个错误，因为你可能:

  1. 有语法错误(例如，一个额外的括号: [(ngModel)]]=) ，或
  2. 这个 “已在角 v6中弃用，将在角 v7中删除”，因为它混合了两种形式的策略，使它:

  • 看起来实际使用的是 ngModel指令，但实际上它是反应形式指令上的一个名为 ngModel的输入/输出属性，它只是近似于(某些)其行为。具体来说，它允许获取/设置值和拦截值事件。但是，类似于 ngModel的一些其他功能的使用 ngModelOptions 的延迟更新或导出指令 -simply don't work(...)

  • 这种模式混合了模板驱动和反应形式的策略，我们通常不推荐，因为它没有充分利用这两种策略的好处

  • 要在 v7之前更新代码，需要使用 决定是否坚持反应形式指令(并使用反应形式模式获取/设置值) 或者切换到模板驱动的指令。

当你有这样的输入:

<input formControlName="first" [(ngModel)]="value">

它会在浏览器控制台中显示一个关于混合表单策略的警告:

看起来您在与 formControlName相同的表单字段上使用了 ngModel。

但是，如果在引用变量中添加 ngModel作为值，例如:

<input formControlName="first" #firstIn="ngModel" [(ngModel)]="value">

The error above is then triggered and no warning about strategy mixing is shown.

小开

在尝试结合反应式表单和模板式表单的方法时也意识到了这个问题。我把 #name="ngModel"和 [formControl]="name"放在同一个元素上。删除其中任何一个都解决了问题。也不是说，如果您使用 #name=ngModel，您也应该有一个属性，如此 [(ngModel)]="name"，否则，您仍然会得到错误。这也适用于角度6、7和8。

小开

如果 ngModule不工作在输入意味着尝试... 删除双引号周围的 ngModule

like 

<input #form="ngModel" [(ngModel)]......></input>

而不是上面

<input #form=ngModel [(ngModel)]......></input> try this

提交答案