无法绑定到“formGroup”,因为它不是“form”的已知属性
Posted
技术标签:
【中文标题】无法绑定到“formGroup”,因为它不是“form”的已知属性【英文标题】:Can't bind to 'formGroup' since it isn't a known property of 'form' 【发布时间】:2019-08-26 23:22:42 【问题描述】:情况
我正在尝试在我的 Angular 应用程序中创建一个非常简单的表单,但无论如何,它都无法正常工作。
Angular 版本
Angular 2.0.0 RC5
错误
代码
景色
<form [formGroup]="newTaskForm" (submit)="createNewTask()">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" required>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
控制器
import Component from '@angular/core';
import FormGroup, FormControl, Validators, FormBuilder from '@angular/forms';
import FormsModule,ReactiveFormsModule from '@angular/forms';
import Task from './task';
@Component(
selector: 'task-add',
templateUrl: 'app/task-add.component.html'
)
export class TaskAddComponent
newTaskForm: FormGroup;
constructor(fb: FormBuilder)
this.newTaskForm = fb.group(
name: ["", Validators.required]
);
createNewTask()
console.log(this.newTaskForm.value)
ngModule
import NgModule from '@angular/core';
import BrowserModule from '@angular/platform-browser';
import FormsModule from '@angular/forms';
import routing from './app.routing';
import AppComponent from './app.component';
import TaskService from './task.service'
@NgModule(
imports: [
BrowserModule,
routing,
FormsModule
],
declarations: [ AppComponent ],
providers: [
TaskService
],
bootstrap: [ AppComponent ]
)
export class AppModule
问题
为什么会出现这个错误?我错过了什么吗?
【问题讨论】:
确保将 ReactiveFormsModule 导入到使用表单的模块(例如 auth.module 、 form.module )而不是 app.module 。 angular.io/guide/reactive-forms 我希望我能对 Angular 团队的设计决策投反对票 【参考方案1】:ReactiveFormsModule
和 FormsModule
导入应添加到您的自定义组件模块及其调用它的父组件中。
例如,我需要为我的过滤器组件添加表单。所以我应该在我的过滤器模块及其父页面(可能是列表)模块中添加这个导入,从那里点击这个过滤器按钮。
【讨论】:
【参考方案2】:首先,它与 Angular 版本>2 无关。只需在您的 app.module.ts 文件中导入以下内容即可解决问题。
import FormsModule, ReactiveFormsModule from '@angular/forms';
然后将 FormsModule 和 ReactiveFormsModule 添加到您的导入数组中。
imports: [
FormsModule,
ReactiveFormsModule
],
注意:您也可以将ReactiveFormsModule
导入特定模块而不是app.module.ts
【讨论】:
【参考方案3】:我的解决方案很微妙,我还没有看到它列出来。
我在 app.module.ts
中未声明的 Angular 材质对话框组件中使用了反应形式。主要组件在app.module.ts
中声明,并会打开对话框组件,但对话框组件未在app.module.ts
中显式声明。
我正常使用对话框组件没有任何问题,只是每次打开对话框时表单都会抛出此错误:
无法绑定到“formGroup”,因为它不是“form”的已知属性。
【讨论】:
【参考方案4】:简单的解决方案:
第 1 步:导入 ReactiveFormModule
import ReactiveFormsModule from '@angular/forms';
第 2 步:将“ReactiveFormsModule”添加到导入部分
imports: [
ReactiveFormsModule
]
第 3 步:重启应用并完成
示例:
import NgModule from '@angular/core';
import CommonModule from '@angular/common';
import ReactiveFormsModule from '@angular/forms';
import EscalationManagementRoutingModule from './escalation-management-routing.module';
import EscalationManagementRouteWrapperComponent from './escalation-management-route-wrapper.component';
@NgModule(
declarations: [EscalationManagementRouteWrapperComponent],
imports: [
CommonModule,
EscalationManagementRoutingModule,
ReactiveFormsModule
]
)
export class EscalationManagementModule
【讨论】:
【参考方案5】:当您在模态(入口组件)中有一个 formGroup 时,您还必须在实例化模态的模块中导入 ReactiveFormsModule。
【讨论】:
【参考方案6】:我遇到了同样的问题。确保如果使用 submodules(例如,您不仅有 app.component.module.ts),而且有一个单独的组件(例如 login.module.ts),则在其中包含 ReactiveFormsModule 导入这个 login.module.ts 导入,让它工作。我什至不必在我的 app.component.module 中导入 ReactiveFormsModule,因为我对所有内容都使用了子模块。
文件login.module.ts
import NgModule from '@angular/core';
import CommonModule from '@angular/common';
import FormsModule, ReactiveFormsModule from '@angular/forms';
import IonicModule from '@ionic/angular';
import LoginPageRoutingModule from './login-routing.module';
import LoginPage from './login.page';
@NgModule(
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
IonicModule,
LoginPageRoutingModule
],
declarations: [LoginPage]
)
export class LoginPageModule
【讨论】:
这也是我的问题。我有 enter-credentials-modal-component 和 login-site-component。在我为他们两个导入 FormsModule 和 ReactiveFormsModule 之前它没有工作【参考方案7】:如果这只是一个 TypeScript 错误,但表单上的一切正常,则可能只需要重新启动 IDE。
【讨论】:
【参考方案8】:在相应模块中导入ReactiveFormsModule。
【讨论】:
【参考方案9】:错误表示此模块中无法识别 FormGroup。因此,您必须在使用 FormGroup
的每个模块 中导入这些(以下)模块import FormsModule, ReactiveFormsModule from '@angular/forms';
然后将 FormsModule 和 ReactiveFormsModule 添加到您的 Module 的 导入数组中。
imports: [
FormsModule,
ReactiveFormsModule
],
您可能认为我已经在 AppModule 中添加了它,它应该继承它?但事实并非如此。因为这些模块正在导出仅在导入模块中可用的必需指令。在 Sharing modules 中阅读更多信息。
导致这些错误的其他因素可能是拼写错误,如下所示...
[FormGroup]="form" 大写 F 而不是小写 f
[formsGroup]="form" 额外的 s 在表单之后
【讨论】:
很好的答案!我错过了一个重要的导入。【参考方案10】:别像我一样笨。我遇到了与上面相同的错误,并且 none 以前的答案中的选项都有效。然后我意识到我在FormGroup
中大写了“F”。呵呵!
代替:
[FormGroup]="form"
做:
[formGroup]="form"
【讨论】:
【参考方案11】:假设您的应用结构如下:
AnotherModule
<your_form>
AppModule
根据您的表单类型将ReactiveFormsModule
或FormsModule
导入AnotherModule
。
确保AnotherModule
被导入到AppModule
。
【讨论】:
【参考方案12】:如果您在开发组件时遇到此问题,则应将这两个模块添加到您最近的模块中:
import FormsModule, ReactiveFormsModule from '@angular/forms';
@NgModule(
declarations: [
AppComponent
],
imports: [
// other modules
FormsModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
)
export class AppModule
如果您正在为您的组件开发测试,那么您应该将此模块添加到您的测试文件中,如下所示:
import async, ComponentFixture, TestBed from '@angular/core/testing';
import ContactusComponent from './contactus.component';
import ReactiveFormsModule from '@angular/forms';
describe('ContactusComponent', () =>
let component: ContactusComponent;
let fixture: ComponentFixture<ContactusComponent>;
beforeEach(async(() =>
TestBed.configureTestingModule(
declarations: [ContactusComponent],
imports:[
ReactiveFormsModule
]
)
.compileComponents();
));
beforeEach(() =>
fixture = TestBed.createComponent(ContactusComponent);
component = fixture.componentInstance;
fixture.detectChanges();
);
it('should create', () =>
expect(component).toBeTruthy();
);
);
【讨论】:
【参考方案13】:使用和导入REACTIVE_FORM_DIRECTIVES:
import NgModule from '@angular/core';
import BrowserModule from '@angular/platform-browser';
import FormsModule, ReactiveFormsModule from '@angular/forms';
import AppComponent from './app.component';
@NgModule(
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule
],
declarations: [
AppComponent
],
bootstrap: [AppComponent]
)
export class AppModule
【讨论】:
“REACTIVE_FORM_DIRECTIVES”是字面意思吗?【参考方案14】:我没有看到这里描述的这种特殊的失败机制,也没有在这个问题的其他地方看到任何对 public-api.ts
的引用,所以添加它以防它帮助其他人。
我在功能模块中使用反应式表单构建了一个组件。按照其他答案中描述的指导,我的模块构建没有问题,直到我尝试通过public-api.ts
导出组件。那时,我开始收到熟悉的错误Can't bind to 'formGroup' since it isn't a known property of 'form'
,没有其他迹象表明可能出了什么问题。
此时我出现了这个问题,因为我忘记从NgModule
声明和导出组件。一旦我在那里添加它,模块就开始再次构建。因此,在尝试导出 Reactive Forms 组件时,请在 NgModule
中记住三件事:
import NgModule from '@angular/core';
import ReactiveFormsModule from '@angular/forms';
import MyExportedComponent from './components/my-exported.component';
@NgModule(
declarations: [
MyExportedComponent // this
],
imports: [
ReactiveFormsModule // this
],
exports: [
MyExportedComponent // and this
],
providers: [
]
)
export class MyModule
此时,Angular 会很好地处理public-api.ts
中的这一行:
export * from './lib/my-module/components/my-exported.component';
【讨论】:
【参考方案15】:RC6/RC7/最终版本修复
要修复此错误,您只需在模块中从@angular/forms
导入ReactiveFormsModule
。下面是一个带有 ReactiveFormsModule
导入的基本模块的示例:
import NgModule from '@angular/core';
import BrowserModule from '@angular/platform-browser';
import FormsModule, ReactiveFormsModule from '@angular/forms';
import AppComponent from './app.component';
@NgModule(
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule
],
declarations: [
AppComponent
],
bootstrap: [AppComponent]
)
export class AppModule
为了进一步解释,formGroup
是名为FormGroupDirective
的指令的选择器,它是ReactiveFormsModule
的一部分,因此需要导入它。它用于将现有的FormGroup
绑定到 DOM 元素。您可以在Angular's official docs page 上阅读更多相关信息。
RC5 修复
您需要在控制器中添加import REACTIVE_FORM_DIRECTIVES from '@angular/forms'
并将其添加到@Component
中的directives
。这将解决问题。
修复该问题后,您可能会收到另一个错误,因为您没有在表单的输入中添加formControlName="name"
。
【讨论】:
我不明白为什么在 app.module 中导入 FormsModule 时需要添加 REACTIVE_FORM_DIRECTIVES。模块的全部意义在于避免必须在组件内声明指令。 @DanielPliscki 你完全正确,我刚刚发现他们在今天发布的 RC6 版本中修复了这个问题。现在不需要这样做,只需要导入FormsModule
和ReactiveFormsModule
。我将编辑我的答案。
我浪费了一个小时,忘记了我为登录表单创建了一个单独的模块,以便在状态之间延迟加载模块。 (我是 A2 的新手,还是更喜欢 A1)请确保您使用正确的模块!不要像我一样是个笨蛋。您也不再需要添加到组件中。模块中的导入就足够了。谢谢
谢谢,为我工作。我很困惑为什么我偶然发现的 Angular 2 中的 FormControls 指南中没有提到这一点..
在 Angular 4 中,我在提供者列表中添加了 ReactiveFormsModule
,它起作用了。不知道这是否是你应该这样做的方式。【参考方案16】:
您的 Angular 版本是 11+,并且您使用 VisualStudioCode?p>
并且您已经导入了 FormsModule
、ReactiveFormsModule
并将其添加到您的导入部分中,例如app.module.ts
(相关模块可以不同,选对的):
// app.module.ts (excerpt)
import FormsModule, ReactiveFormsModule from '@angular/forms';
imports: [
...
FormsModule,
ReactiveFormsModule,
...
],
-
您有正确的导入(有时还有其他名称相似的库);您已经在组件中定义并初始化了表单?
// MyWonderfulComponent (excerpt)
import FormBuilder, FormGroup, Validators from '@angular/forms';
export class MyWonderfulComponent implements OnInit
form: FormGroup;
...
constructor (private fb: FormBuilder)
this.form = this.fb.group(
// DON'T FORGET THE FORM INITIALISATION
);
-
您的 Component-Template 有您的表单:
<form [formGroup]="form" (ngSubmit)="submit()">
<!-- MY FORM CONTROLS ARE ALREADY HERE -->
</form>
-
您仍然收到错误消息“...因为它不是...的已知属性”?
然后只需简单地重新启动您的 VisualStudioCode :)
【讨论】:
请注意,您需要在组件实际所属的模块中导入FormsModule/ReactiveFormsModule
。盲目地将它们放在app.module.ts
是不够的。【参考方案17】:
我在这里尝试了几乎所有的解决方案,但我的问题有点不同(愚蠢)。 我在路由模块中添加了组件,但没有包含它的主模块。 因此,请确保您的组件是模块的一部分。
【讨论】:
如果你的组件是子组件,别忘了将import FormsModule, ReactiveFormsModule from '@angular/forms';
添加到其各自的模块中。【参考方案18】:
注意:如果您在子模块的组件中工作,那么您只需在子模块而不是父应用根模块中导入ReactiveFormsModule
。
【讨论】:
这是我缺少的魔法酱。【参考方案19】:需要在这个模块中导入FormsModule、ReactiveFormsModule
如果您在另一个模块中使用了 reactiveForm,那么您还必须与上述步骤一起执行此步骤:在该特定模块中也导入 reactiveFormsModule。
例如:
imports: [
FormsModule,
ReactiveFormsModule,
],
【讨论】:
【参考方案20】:在 app.modual.ts 文件中导入以下行并在 angular cli 中运行命令 ng s -o
。
import FormsModule, ReactiveFormsModule from '@angular/forms';
【讨论】:
【参考方案21】:您需要在此模块以及顶层导入FormsModule
、ReactiveFormsModule
。
如果您在另一个模块中使用了reactiveForm
,那么您还必须执行此步骤以及上述步骤:在该特定模块中也导入reactiveFormsModule
。
例如:
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
AppRoutingModule,
HttpClientModule,
BrowserAnimationsModule
],
【讨论】:
【参考方案22】:在过去的 3 天里,我一直在努力解决这个错误。我在我的两个模块中添加了上面 cmets 中提到的 ReactiveFormsModule 和 FormsModule,但是直到我用另一个“ng serve”重新加载我的项目之前它没有效果。 我不知道为什么它没有自动重新加载,但至少我很高兴它终于工作了! 请解释一下?
【讨论】:
见这个:***.com/questions/49884563/…。发生这种情况是因为有时您的代码没有被转译,而您看到的是旧代码。【参考方案23】:即使您已经导入了FormsModule
和ReactiveFormsModule
,您也会收到此错误消息。我将一个组件(使用[formGroup]
指令)从一个项目移动到另一个项目,但未能将该组件添加到新模块中的declarations
数组中。这导致了Can't bind to 'formGroup' since it isn't a known property of 'form'
错误消息。
【讨论】:
您是否尝试在修改后使用 ng serve 重新加载项目? (如果您有嵌入式模块,则必须使用 formGroup 在每个模块中导入表单和反应式表单模块)【参考方案24】:从 '@angular/forms' 导入 FormsModule, ReactiveFormsModule ; 并将其添加到 app-module.ts 文件中的 imports 数组中。
【讨论】:
【参考方案25】:我有同样的问题,问题实际上只是我忘记导入和声明在模块中保存表单的组件:
import ContactFormComponent from './contact-form/contact-form.component';
@NgModule(
declarations: [..., ContactFormComponent, ...],
imports: [CommonModule, HomeRoutingModule, SharedModule]
)
export class HomeModule
【讨论】:
【参考方案26】:Angular 4 结合 功能模块(例如,如果您使用共享模块)要求您还导出 ReactiveFormsModule
才能工作。
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
【讨论】:
【参考方案27】:在您的 app.module.ts 中导入并注册 ReactiveFormsModule。
import ReactiveFormsModule from '@angular/forms';
@NgModule(
declarations: [
AppComponent,
HighlightDirective,
TestPipeComponent,
ExpoentialStrengthPipe
],
imports: [
BrowserModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
)
export class AppModule
确保 .ts 和 .html 文件中的拼写正确。 xxx.ts
profileForm = new FormGroup(
firstName: new FormControl(''),
lastName: new FormControl('')
);
xxx.html 文件-
<form [formGroup]="profileForm">
<label>
First Name:
<input type="text" formControlName = "firstName">
</label>
<label>
Last Name:
<input type="text" formControlName = "lastName">
</label>
</form>
我错误地将 [FormGroup] 写入 [formGroup]。在 .html 中检查您的拼写是否正确。如果 .html 文件有任何问题,它不会引发编译时错误。
【讨论】:
【参考方案28】:如果你必须导入两个模块,那么在下面添加这样的
import ReactiveFormsModule,FormsModule from '@angular/forms';
@NgModule(
declarations: [
AppComponent,
HomeComponentComponent,
BlogComponentComponent,
ContactComponentComponent,
HeaderComponentComponent,
FooterComponentComponent,
RegisterComponent,
LoginComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
routes,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
)
【讨论】:
【参考方案29】:我在使用 Angular 7 时遇到了同样的问题。只需在 app.module.ts 文件中导入以下内容即可。
import FormsModule, ReactiveFormsModule from '@angular/forms';
然后将 FormsModule 和 ReactiveFormsModule 添加到您的导入数组中。
imports: [
FormsModule,
ReactiveFormsModule
],
【讨论】:
【参考方案30】:小注意:小心加载器并最小化(Rails 环境):
在看到这个错误并尝试了所有解决方案后,我意识到我的 html 加载器有问题。
我已将我的 Rails 环境设置为使用此加载器 (config/loaders/html.js.
) 成功导入组件的 HTML 路径:
module.exports =
test: /\.html$/,
use: [
loader: 'html-loader?exportAsEs6Default',
options:
minimize: true
]
经过几个小时的努力和无数的 ReactiveFormsModule 导入,我看到我的 formGroup
是小写字母:formgroup
。
这让我想到了加载器,它在最小化时将我的 HTML 降级了。
更改选项后,一切正常,我可以再次哭泣。
我知道这不是问题的答案,但对于未来的 Rails 访问者(以及其他使用自定义加载器的人),我认为这可能会有所帮助。
【讨论】:
谢谢你,我终于不得不使用 => minimize: caseSensitive: true 让它工作以上是关于无法绑定到“formGroup”,因为它不是“form”的已知属性的主要内容,如果未能解决你的问题,请参考以下文章
无法绑定到“formGroup”,因为它不是 Angular 中“form”的已知属性
Angular2 - 无法绑定到“formGroup”,因为它不是“form”的已知属性
未捕获的错误:模板解析错误:无法绑定到“FormGroup”,因为它不是“form”的已知属性
Angular2:无法绑定到“formGroup”,因为它不是“form”的已知属性
Angular 9 - 无法绑定到“formGroup”,因为它不是“form”的已知属性,即使正在导入 FormsModule 和 FormBuilder