- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我正面临这个令人沮丧的问题
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
这是我的 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 { }
最佳答案
您必须导入 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 {
另见
关于Angular2 问题 : There is no directive with “exportAs” set to “ngForm” ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45578799/
在 Angular 1 (1.5) 中,表单 Controller 有一个 $setSubmitted()允许您以编程方式设置 .$submitted 的方法标记为真。 如何通过 NgForm 对象在
我是 Angular 的新手,我正在使用模板驱动的表单。当我使用 NgForm 时,它抛出错误: src/app/pages/add-booking/servicing/servicing.compo
我是 Angular 的新手,我正在使用模板驱动的表单。当我使用 NgForm 时,它抛出错误: src/app/pages/add-booking/servicing/servicing.compo
我正在尝试制作一个包含两个不同组件的表单。一位家长和一位 child 。我查看了很多教程,他们都在谈论提供服务。 不过,我在这个website上找到了一个方法.它包括在子组件中添加以下内容: view
我遇到了以下问题。我想使用 NG2 Forms。根据 Angular 2 文档,在表单上使用 ngForm 指令并在输入上使用 ngControl 指令,表单应该始终能够访问输入的有效性。 如果输入与
我有简单的形式 Is required lol 和组件作为 export class InputOverviewExample { comm
我最近一直在使用 React,并且非常喜欢它,但我错过了一些我在其他框架中习惯的东西。 ngForm 中主要的一个来自 Angular,Angular 使用它来提供非常简单的表单验证。检查表单是否有效
当我提交表单时,我有这个功能 login(form: NgForm) 如果我尝试以下操作 console.log(form.value.password); // this works perfect
我是 Angular 初学者,我正在尝试打印在控制台中选择的表单元素的值。所有其他元素都已打印,但 select 选定列表元素显示 undefined。这是我的代码category.services.
我正在尝试验证使用指令生成的动态表单输入并隔离范围。在指令之外,我有主窗体,在 ng-repeat 内部,我尝试使用 ng-form,但它从未显示错误消息。最初我在 ng-repeat 上有 ng-f
目标是当用户单击按钮转到下一页时,如果页面部分填写但无效,则阻止用户继续并显示错误指示符。 在模板驱动的表单中,我有几个容器元素使用 NgModelGroup 属性来表示表单中的“页面”。在我的组件中
我正在尝试做一个登录表单组件,但我无法读取表单数据。 当我尝试在控制台上写入用户名时,'undefined' 写入。 一切看起来都很正常,但表单数据没有到达组件。 下面是html代码:
这是父 HTML 这是子 HTML 我需要访问父组件中的子窗体状态 最佳答案 子模板: 子组件: export class Ch
login 工作组件的html代码是这样的。 Regis
我想知道是否有任何方法可以检索从表单的 NgForm.controls 对象中提取的 FormControl 的 NgModel它属于哪个,或者直接从表单中检索 NgModel。 我有一个表单,在提交
如何在组件中引用“myform”?是否可以?一定要使用 formbuilder(我尽量避免使用它)吗? Value 最佳答案 实际上还有另一种方法可以做到这一点。您可以使用
这个问题在这里已经有了答案: Angular 4.4.0-4.4.2 production build throwing "No provider for NgForm!" error (2 个答案
我在 Angular 4 上处理表单,我不知道使用 NgForm 和 FormGroup 处理错误和输入验证器有什么区别。处理表格有什么大的不同吗? 最佳答案 如果我没看错,您就会遇到模板驱动表单和响
我已经包含了 FormsModule 但它显示错误。 There is no directive with “exportAs” set to “ngForm” 我的 Login.component.
Angular 6 表单验证简单示例。通过电子邮件验证和选择框(下拉)。ngForm 带有选择框的 Angular 6 简单示例 最佳答案 使用ngForm。将其导入您的 component.modu
我是一名优秀的程序员,十分优秀!