- 首页
- 其他开发
- Angular2 问题:没有将“exportAs"设置为“ngForm"的指令
Angular2 问题:没有将“exportAs"设置为“ngForm"的指令
[英] Angular2 issue: There is no directive with “exportAs” set to “ngForm”
本文介绍了Angular2 问题:没有将“exportAs"设置为“ngForm"的指令的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正面临这个令人沮丧的问题
<块引用>
没有将exportAs"设置为ngForm"的指令(
]#f="ngForm" (ngSubmit)="onSubmit(f)" class="form-horizontal">"): ng:///ComponentsModule/EquipeComponent.html@8:12错误:模板解析错误:没有将exportAs"设置为ngForm"(]#f="ngForm" (ngSubmit)="onSubmit(f)" class="form-horizontal">"): ng:///ComponentsModule/EquipeComponent.html@8:12
这是我的app.module.ts 包含的内容
import { BrowserModule } from '@angular/platform-browser';从'@angular/core' 导入 { NgModule };从@angular/common"导入 { LocationStrategy, HashLocationStrategy };从'@angular/forms' 导入 { NgForm };从@angular/forms"导入 { FormsModule, ReactiveFormsModule };从 './app.component' 导入 { AppComponent };从'ngx-bootstrap/dropdown'导入{BsDropdownModule}；从'ngx-bootstrap/tabs'导入{TabsModule}；从 './shared/nav-dropdown.directive' 导入 { NAV_DROPDOWN_DIRECTIVES };从 'ng2-charts/ng2-charts' 导入 { ChartsModule };从 './shared/sidebar.directive' 导入 { SIDEBAR_TOGGLE_DIRECTIVES };从'./shared/aside.directive'导入{AsideToggleDirective}；从'./shared/breadcrumb.component'导入{面包屑组件}；//路由模块import { AppRoutingModule } from './app.routing';//布局从 './layouts/full-layout.component' 导入 { FullLayoutComponent };import { SimpleLayoutComponent } from './layouts/simple-layout.component';@NgModule({进口:[浏览器模块，应用路由模块，BsDropdownModule.forRoot(),TabsModule.forRoot(),图表模块，表单模块，响应式表单模块],声明: [应用组件，完整布局组件，简单布局组件，NAV_DROPDOWN_DIRECIVES，面包屑组件，SIDEBAR_TOGGLE_DIRECTIVES，AsideToggleDirective，],提供者:[{提供:位置策略，useClass: HashLocationStrategy}],引导程序:[ AppComponent ]})导出类 AppModule { }
我几乎是 Angular2 的新手，所以我无法弄清楚我的代码有什么问题.
这是equipe.component.html
的内容
<div class="row"><div class="col-md-12"><div class="card"><div class="card-header"><strong>Ajout Equipe</strong>
<div class="card-block"><form #f="ngForm" (ngSubmit)="onSubmit(f)" class="form-horizontal"><div class="form-group row"><label class="col-md-3 form-control-label" for="text-input">Nom Equipe</label><div class="col-md-9"><input type="text" id="text-input" name="text-input" class="form-control" placeholder="Saisir le nom de l'equipe" required>
<div class="form-group row"><label class="col-md-3 form-control-label" for="textarea-input">描述</label><div class="col-md-9"><textarea id="textarea-input" name="textarea-input" rows="9" class="form-control" placeholder="Description de l'equipe"></textarea>
</表单>
<div class="card-footer"><button type="submit" class="btn btn-sm btn-primary pull-right"><i class="fa fa-dot-circle-o"></i>Ajouter</button>
</div><!--/.col--></div><!--/.row-->
这是equipe.component.ts的内容:
import { Component } from '@angular/core';从@angular/forms"导入{NgForm}；从'@angular/forms'导入{FormsModule}；从'@angular/platform-browser' 导入 { BrowserModule };@成分({templateUrl: 'equipe.component.html',})出口类 EquipeComponent {构造函数(){}onSubmit(f:NgForm) {console.log('这是一个测试');}}
这是我的ComponentsModule
的内容import { NgModule } from '@angular/core';从 './buttons.component' 导入 { ButtonsComponent };从 './cards.component' 导入 { CardsComponent };//表单组件import { FormsComponent } from './forms.component';从'ngx-bootstrap/dropdown'导入{BsDropdownModule}；从 './social-buttons.component' 导入 { SocialButtonsComponent };从 './switches.component' 导入 { SwitchesComponent };从 './tables.component' 导入 { TablesComponent };//模态组件从 'ngx-bootstrap/modal' 导入 { ModalModule };从 './modals.component' 导入 { ModalsComponent };//标签组件从'ngx-bootstrap/tabs'导入{TabsModule}；从'./tabs.component'导入{TabsComponent}；//资源组件import { RessourceComponent } from './ressource.component';//装备组件从 './equipe.component' 导入 { EquipeComponent };//组件路由import { ComponentsRoutingModule } from './components-routing.module';@NgModule({进口:[组件路由模块，BsDropdownModule.forRoot(),ModalModule.forRoot(),标签模块],声明: [按钮组件，卡片组件，表单组件，模态组件，社交按钮组件，开关组件，表组件，标签组件，资源组件，装备组件]})导出类 ComponentsModule { }
解决方案
您必须导入FormsModule 或其他导出FormsModule 的模块到@NgModule 其中 EquipeComponent 已声明.
@NgModule({进口:[表单模块，//或导出 FormsModule 的 SharedModule...],声明: [装备组件，某个组件]})导出类 ComponentsModule {}
在前面的代码中，angular 将使用 SomeComponent 指令和其他模块导出的所有指令编译 EquipeComponent 模板
export const TEMPLATE_DRIVEN_DIRECTIVES: Type[] = [NgModel, NgModelGroup, NgForm];^^^^^@NgModule({声明:TEMPLATE_DRIVEN_DIRECTICIVES，提供者:[RadioControlRegistry]，出口:[InternalFormsSharedModule，TEMPLATE_DRIVEN_DIRECTIVES]^^^^^^^^^^^^^})导出类 FormsModule {}@指示({...exportAs: 'ngForm'})导出类 NgForm 扩展 ControlContainer 实现 Form {
另见
I 'am facing this frustrating issue
There is no directive with "exportAs" set to "ngForm" ("
]#f="ngForm" (ngSubmit)="onSubmit(f)" class="form-horizontal">
"): ng:///ComponentsModule/EquipeComponent.html@8:12
Error: Template parse errors:
There is no directive with "exportAs" set to "ngForm" ("
]#f="ngForm" (ngSubmit)="onSubmit(f)" class="form-horizontal">
"): ng:///ComponentsModule/EquipeComponent.html@8:12
This is what my app.module.ts contains
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { NgForm } from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TabsModule } from 'ngx-bootstrap/tabs';
import { NAV_DROPDOWN_DIRECTIVES } from './shared/nav-dropdown.directive';
import { ChartsModule } from 'ng2-charts/ng2-charts';
import { SIDEBAR_TOGGLE_DIRECTIVES } from './shared/sidebar.directive';
import { AsideToggleDirective } from './shared/aside.directive';
import { BreadcrumbsComponent } from './shared/breadcrumb.component';
// Routing Module
import { AppRoutingModule } from './app.routing';
// Layouts
import { FullLayoutComponent } from './layouts/full-layout.component';
import { SimpleLayoutComponent } from './layouts/simple-layout.component';
@NgModule({
imports: [
BrowserModule,
AppRoutingModule,
BsDropdownModule.forRoot(),
TabsModule.forRoot(),
ChartsModule,
FormsModule,
ReactiveFormsModule
],
declarations: [
AppComponent,
FullLayoutComponent,
SimpleLayoutComponent,
NAV_DROPDOWN_DIRECTIVES,
BreadcrumbsComponent,
SIDEBAR_TOGGLE_DIRECTIVES,
AsideToggleDirective,
],
providers: [{
provide: LocationStrategy,
useClass: HashLocationStrategy
}],
bootstrap: [ AppComponent ]
})
export class AppModule { }
I'am almost new to Angular2 so I can't figure out what is the problem with my code .
This is the content of equipe.component.html
<div class="animated fadeIn">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<strong>Ajout Equipe</strong>
</div>
<div class="card-block">
<form #f="ngForm" (ngSubmit)="onSubmit(f)" class="form-horizontal">
<div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input">Nom Equipe</label>
<div class="col-md-9">
<input type="text" id="text-input" name="text-input" class="form-control" placeholder="Saisir le nom de l'equipe" required>
</div>
<div class="form-group row">
<label class="col-md-3 form-control-label" for="textarea-input">Description</label>
<div class="col-md-9">
<textarea id="textarea-input" name="textarea-input" rows="9" class="form-control" placeholder="Description de l'equipe"></textarea>
</div>
</div>
</div>
</form>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-sm btn-primary pull-right"><i class="fa fa-dot-circle-o"></i> Ajouter</button>
</div>
</div>
</div><!--/.col-->
</div><!--/.row-->
</div>
And this is the content of equipe.component.ts:
import { Component } from '@angular/core';
import { NgForm} from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
@Component({
templateUrl: 'equipe.component.html',
})
export class EquipeComponent {
constructor() { }
onSubmit(f:NgForm) {
console.log('this is a test');
}
}
This is the content of my ComponentsModule
import { NgModule } from '@angular/core';
import { ButtonsComponent } from './buttons.component';
import { CardsComponent } from './cards.component';
// Forms Component
import { FormsComponent } from './forms.component';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { SocialButtonsComponent } from './social-buttons.component';
import { SwitchesComponent } from './switches.component';
import { TablesComponent } from './tables.component';
// Modal Component
import { ModalModule } from 'ngx-bootstrap/modal';
import { ModalsComponent } from './modals.component';
// Tabs Component
import { TabsModule } from 'ngx-bootstrap/tabs';
import { TabsComponent } from './tabs.component';
// Ressource Component
import { RessourceComponent } from './ressource.component';
// Equipe Component
import { EquipeComponent } from './equipe.component';
// Components Routing
import { ComponentsRoutingModule } from './components-routing.module';
@NgModule({
imports: [
ComponentsRoutingModule,
BsDropdownModule.forRoot(),
ModalModule.forRoot(),
TabsModule
],
declarations: [
ButtonsComponent,
CardsComponent,
FormsComponent,
ModalsComponent,
SocialButtonsComponent,
SwitchesComponent,
TablesComponent,
TabsComponent,
RessourceComponent,
EquipeComponent
]
})
export class ComponentsModule { }
解决方案
You have to import FormsModule or other module that exportes FormsModule to
@NgModule where EquipeComponent has been declared.
@NgModule({
imports: [
FormsModule,
// or SharedModule that exports FormsModule
...
],
declarations: [
EquipeComponent,
SomeComponent
]
})
export class ComponentsModule {}
In the preceding code angular will compile EquipeComponent template using SomeComponent directive and all directives that other modules has exported
export const TEMPLATE_DRIVEN_DIRECTIVES: Type<any>[] = [NgModel, NgModelGroup, NgForm];
^^^^^
@NgModule({
declarations: TEMPLATE_DRIVEN_DIRECTIVES,
providers: [RadioControlRegistry],
exports: [InternalFormsSharedModule, TEMPLATE_DRIVEN_DIRECTIVES]
^^^^^^^^^^^^
})
export class FormsModule {
}
@Directive({
...
exportAs: 'ngForm'
})
export class NgForm extends ControlContainer implements Form {
See also
这篇关于Angular2 问题:没有将“exportAs"设置为“ngForm"的指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
