Angular2 问题：没有将“exportAs”设置为“ngForm”的指令
Posted
技术标签:
【中文标题】Angular2 问题：没有将“exportAs”设置为“ngForm”的指令【英文标题】：Angular2 issue: There is no directive with “exportAs” set to “ngForm” 【发布时间】：2018-01-16 15:24:43 【问题描述】：我正面临这个令人沮丧的问题
没有将“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';
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
我几乎是 Angular2 的新手，所以我无法弄清楚我的代码有什么问题。
这是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>
这是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');
这是我的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
【问题讨论】：
问题出在您的 HTML 中。#f="ngForm" 。 # 是在模板中将事物导出为变量的别名，而您没有正确使用它。
@JasonSpradlin 我正在关注这个documentation
能否请您在 HTML 中使用表单的地方显示您的代码？ ，即使我遵循此文档，但在我的情况下一切正常
@JasonSpradlin 我已经添加了我的 HTML 代码
您在哪个@NgModule 中声明了EquipeComponent？
【参考方案1】：
您必须导入FormsModule 或其他导出FormsModule 的模块到
@NgModule 其中EquipeComponent 已被声明。
@NgModule(
imports: [
FormsModule,
// or SharedModule that exports FormsModule
...
],
declarations: [
EquipeComponent,
SomeComponent
]
)
export class ComponentsModule
在前面的代码中，Angular 将使用 SomeComponent 指令和其他模块导出的所有指令编译 EquipeComponent 模板
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
另见
Angular 2 Use component from another module【讨论】：
添加声明后我收到此错误错误错误：未捕获（承诺中）：错误：类型 EquipeComponent 是 2 个模块声明的一部分：AppModule 和 ComponentsModule！请考虑将 EquipeComponent 移至导入 AppModule 和 ComponentsModule 的更高模块。您还可以创建一个新的 NgModule，它导出并包含 EquipeComponent，然后在 AppModule 和 ComponentsModule 中导入该 NgModule。 错误：EquipeComponent 类型是 2 个模块声明的一部分：AppModule 和 ComponentsModule！请考虑将 EquipeComponent 移至导入 AppModule 和 ComponentsModule 的更高模块。您还可以创建一个新的 NgModule，它导出并包含 EquipeComponent，然后在 AppModule 和 ComponentsModule 中导入该 NgModule。 我在我的 app.module.ts 中添加了声明 @IbrahimMAATKI ImportFormsModule into ComponentsModule 从 AppModule 中移除 EquipeComponent
我没看到你在哪里导入 FormsModule @NgModule( imports: [ ComponentsRoutingModule, BsDropdownModule.forRoot(), ModalModule.forRoot(), TabsModule ],以上是关于Angular2 问题：没有将“exportAs”设置为“ngForm”的指令的主要内容，如果未能解决你的问题，请参考以下文章
Angular/NgForm/NgModel 指令错误：没有将“exportAs”设置为“ngForm”的指令
Angular 4中的模板解析错误“没有将exportAs设置为ngModel的指令”
没有找到 exportAs 'ngModel' 的指令。角 12