import { FormsModule } from '@angular/forms';
@NgModule({
imports: [FormsModule],
...
})
[我在使用TypeScript的Angular2-forms框架时不断收到此错误:
没有
directive
的“ exportAs”设置为“ ngForm”
这是我的代码
项目依赖项:
"dependencies": {
"@angular/common": "2.0.0-rc.6",
"@angular/compiler": "2.0.0-rc.6",
"@angular/core": "2.0.0-rc.6",
"@angular/forms": "2.0.0-rc.6",
"@angular/http": "2.0.0-rc.6",
"@angular/platform-browser": "2.0.0-rc.6",
"@angular/platform-browser-dynamic": "2.0.0-rc.6",
"@angular/router": "3.0.0-rc.2",
"ng2-bootstrap": "^1.1.1",
"reflect-metadata": "^0.1.8",
"core-js": "^2.4.0",
"es6-module-loader": "^0.17.8",
"rxjs": "5.0.0-beta.11",
"systemjs": "0.19.27",
"zone.js": "0.6.17",
"jquery": "3.0.0",
}
这是登录模板:
<form #loginForm="ngForm" (ng-submit)="authenticate(loginForm.value)">
</form>
...和登录组件:
import { Component } from '@angular/core';
import {Http, Headers} from '@angular/http';
@Component({
moduleId: module.id,
selector: 'login-cmp',
templateUrl: 'login.component.html'
})
export class LoginComponent {
constructor($http: Http) {
this.$http = $http;
}
authenticate(data) {
...
}
}
我有此错误:
zone.js?1474211973422:484 Unhandled Promise rejection: Template parse errors:
There is no directive with "exportAs" set to "ngForm" ("
<form [ERROR ->]#loginForm="ngForm"
(ngsubmit)="authenticate(loginForm.value)">
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
BrowserModule,
FormsModule //<----------make sure you have added this.
],
....
})
除了要在登录组件ts文件中导入表单模块,还需要导入NgForm。
import { NgForm } from '@angular/forms';
import { FormsModule,ReactiveFormsModule }from'@angular/forms'; imports:[ BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }), HttpClientModule, FormsModule, ReactiveFormsModule/*This one in particular*/,... ],
在app.module.ts中,永久解决诸如
"cannot bind [formGroup] or no directive with export as"
之类的错误。
您必须导入FormsModule,然后将其放在导入部分中。
import { FormsModule } from '@angular/forms';
如果您没有导入模块,则简单,然后导入并声明从'@ angular / forms'导入{FormsModule};
并且如果您这样做了,则只需要从输入字段中删除formControlName ='whatever'
您应使用ctrl + c终止应用程序,并使用ng serve重新运行它,如果您没有在应用程序中包含FormsModule,则模块文件将导入数组,然后再添加它,angular不知道,它不会重新扫描模块,您应该重新启动应用程序,以便angular在包含模板驱动器方法的所有功能之后可以看到包含新模块
就我而言,我必须从ngNoForm
标签中删除<form>
属性。
如果您想在应用程序中导入FormsModule但想跳过特定的表单,则可以使用ngNoForm指令,这将阻止将ngForm添加到表单中
此
<div #myForm="ngForm"></div>
我刚刚移动了路由模块,即在导入的模块数组中,在FormsModule和ReactiveFormsModule上方以及在CommonModule之后移动ARoutingModule。
我遇到了相同的问题,并通过使用以下命令npm update -D && npm update -S
更新所有依赖项(package.json)来解决了此问题>
正如@GünterZöchbauer所指出的,请确保首先包含FormsModule。
我遇到了相同的问题,并通过使用以下命令npm update -D && npm update -S
更新所有依赖项(package.json)来解决了此问题>
正如@GünterZöchbauer所指出的,请确保首先包含FormsModule。
您不仅需要将FormsModule
导入到使用任何角度形式指令的根AppModule,而且还应该导入到每个subModule。
// SubModule A
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
CommonModule,
FormsModule //<----------make sure you have added this.
],
....
})
我知道这是一篇旧文章,但我想分享我的解决方案。我在imports []数组中添加了“ ReactiveFormsModule”来解决此错误
错误:没有将“ exportAs”设置为“ ngForm”(“]的指令>
修复:
module.ts
从'@ angular / forms'导入{FormsModule,ReactiveFormsModule
}] >> imports: [
BrowserModule,
FormsModule ,
ReactiveFormsModule
],
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [FormsModule],
...
})
(以防其他人像我一样失明)form
FTW
<form>
标签失败的作品:
<div (ngSubmit)="search()" #f="ngForm" class="input-group"> <span class="input-group-btn"> <button class="btn btn-secondary" type="submit">Go!</button> </span> <input type="text" ngModel class="form-control" name="search" placeholder="Search..." aria-label="Search..."> </div>
像魅力一样工作:
<form (ngSubmit)="search()" #f="ngForm" class="input-group"> <span class="input-group-btn"> <button class="btn btn-secondary" type="submit">Go!</button> </span> <input type="text" ngModel class="form-control" name="search" placeholder="Search..." aria-label="Search..."> </form>
检查是否导入FormsModule。在新的angular 2发布版本中没有ngControl。您必须将模板更改为示例
<div class="row">
<div class="form-group col-sm-7 col-md-5">
<label for="name">Name</label>
<input type="text" class="form-control" required
[(ngModel)]="user.name"
name="name" #name="ngModel">
<div [hidden]="name.valid || name.pristine" class="alert alert-danger">
Name is required
</div>
</div>
</div>
如果分配了这样的名称:
#editForm="testForm"
... exportAs必须在组件装饰器中定义:
selector: 'test-form',
templateUrl: './test-form.component.html',
styleUrls: ['./test-form.component.scss'],
exportAs: 'testForm'
我遇到了这个问题,但是这里没有答案对我有用。我用Google搜索,发现FormsModule not shared with Feature Modules
因此,如果您的表单位于功能强大的模块中,则必须在其中导入并添加FromsModule
。
请参考:https://github.com/angular/angular/issues/11365
您必须注意的两件事。
如果使用子模块,则必须在该子模块中导入FormModule。
**imports:[CommonModule,HttpModule,FormsModule]**
您必须在模块中导出FormModule
**exports:[FormsModule],**
所以看起来imports:[CommonModule,HttpModule,FormsModule],导出:[FormsModule],
首先,您必须导入FormsModule
从'@ angular / forms'导入{FormsModule};
如果仅使用app.module.ts,则>]
除了要在登录组件ts文件中导入表单模块,还需要导入NgForm。
import { NgForm } from '@angular/forms';
这解决了我的问题
import { FormsModule,ReactiveFormsModule }from'@angular/forms'; imports:[ BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }), HttpClientModule, FormsModule, ReactiveFormsModule/*This one in particular*/,... ],
在app.module.ts中,永久解决诸如
"cannot bind [formGroup] or no directive with export as"
之类的错误。
您必须导入FormsModule,然后将其放在导入部分中。
import { FormsModule } from '@angular/forms';
如果您没有导入模块,则简单,然后导入并声明从'@ angular / forms'导入{FormsModule};
并且如果您这样做了,则只需要从输入字段中删除formControlName ='whatever'
您应使用ctrl + c终止应用程序,并使用ng serve重新运行它,如果您没有在应用程序中包含FormsModule,则模块文件将导入数组,然后再添加它,angular不知道,它不会重新扫描模块,您应该重新启动应用程序,以便angular在包含模板驱动器方法的所有功能之后可以看到包含新模块
就我而言,我必须从ngNoForm
标签中删除<form>
属性。
如果您想在应用程序中导入FormsModule但想跳过特定的表单,则可以使用ngNoForm指令,这将阻止将ngForm添加到表单中
参考:https://www.techiediaries.com/angular-ngform-ngnoform-template-reference-variable/
此
<div #myForm="ngForm"></div>
也引起错误,可以通过包含ngForm directive来解决。
<div ngForm #myForm="ngForm"></div>
我刚刚移动了路由模块,即在导入的模块数组中,在FormsModule和ReactiveFormsModule上方以及在CommonModule之后移动ARoutingModule。
我遇到了相同的问题,并通过使用以下命令npm update -D && npm update -S
更新所有依赖项(package.json)来解决了此问题>
正如@GünterZöchbauer所指出的,请确保首先包含FormsModule。
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [FormsModule],
...
})
(以防其他人像我一样失明)form
FTW
检查是否导入FormsModule。在新的angular 2发布版本中没有ngControl。您必须将模板更改为示例
如果分配了这样的名称:
我遇到了这个问题,但是这里没有答案对我有用。我用Google搜索,发现FormsModule not shared with Feature Modules
您必须注意的两件事。