[英]Can't bind to 'formGroup' since it isn't a known property of 'form'
我试图在我的 Angular 应用程序中制作一个应该是非常简单的表格，但无论如何，它永远不会起作用。
Angular 2.0.0 RC5
无法绑定到“formGroup”，因为它不是“form”的已知属性
<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)
}
}
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 { }
为什么我会收到该错误？ 我错过了什么吗？
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 的官方文档页面上阅读更多相关信息。
RC5 修复
您需要import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms'并将其添加到@Component中的directives中。 这将解决问题。
修复该问题后，您可能会收到另一个错误，因为您没有将formControlName="name"添加到表单中的输入中。
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 { }
好的，经过一番挖掘，我找到了“无法绑定到'formGroup'，因为它不是'form'的已知属性”的解决方案。
就我而言，我一直在使用多个模块文件，我在 app.module.ts 中添加了 ReactiveFormsModule
import { FormsModule, ReactiveFormsModule } from '@angular/forms';`
@NgModule({
declarations: [
AppComponent,
]
imports: [
FormsModule,
ReactiveFormsModule,
AuthorModule,
],
...
但是，当我使用来自另一个模块中添加的组件的 [formGroup] 指令时，这不起作用，例如使用 author.component.ts 中的 [formGroup] 是在 author.module.ts 文件中订阅的：
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AuthorComponent } from './author.component';
@NgModule({
imports: [
CommonModule,
],
declarations: [
AuthorComponent,
],
providers: [...]
})
export class AuthorModule {}
我想如果我在 app.module.ts 中添加了 ReactiveFormsModule，默认情况下 ReactiveFormsModule 将被它的所有子模块继承，比如 author.module 在这种情况下......（错误！）。 我需要在 author.module.ts 中导入 ReactiveFormsModule 以使所有指令起作用：
...
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
...
@NgModule({
imports: [
...,
FormsModule, //added here too
ReactiveFormsModule //added here too
],
declarations: [...],
providers: [...]
})
export class AuthorModule {}
因此，如果您使用子模块，请确保在每个子模块文件中导入 ReactiveFormsModule。 希望这对任何人都有帮助。
我在组件的单元测试期间遇到了这个错误（仅在测试期间，在应用程序中它正常工作）。 解决方案是在.spec.ts文件中导入ReactiveFormsModule ：
// Import module
import { ReactiveFormsModule } from '@angular/forms';
describe('MyComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [MyComponent],
imports: [ReactiveFormsModule], // Also add it to 'imports' array
})
.compileComponents();
}));
});
建议的答案不适用于 Angular 4。相反，我不得不使用另一种带有attr前缀的属性绑定方式：
<element [attr.attribute-to-bind]="someValue">
该错误表示此模块中无法识别 FormGroup。 因此，您必须在使用FormGroup的每个模块中导入这些（以下）模块
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
然后将 FormsModule 和 ReactiveFormsModule 添加到模块的导入数组中。
imports: [
FormsModule,
ReactiveFormsModule
],
你可能会想我已经在AppModule中添加了它，它应该继承它？ 但事实并非如此。 因为这些模块正在导出仅在导入模块中可用的必需指令。 在共享模块中阅读更多内容。
这些错误的其他因素可能是拼写错误，如下所示......
[FormGroup]="form"大写F而不是小f
[formsGroup]="form" 表单后的额外s
如果您必须导入两个模块，请在下面添加
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]
})
首先，它与Angular 版本>2无关。 只需在app.module.ts文件中导入以下内容即可解决问题。
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
然后将 FormsModule 和 ReactiveFormsModule 添加到您的导入数组中。
imports: [
FormsModule,
ReactiveFormsModule
],
注意：您也可以将ReactiveFormsModule导入特定模块而不是app.module.ts
请记住，如果您定义了“功能模块”，则需要在功能模块中导入，即使您已经导入到AppModule中。 来自 Angular 文档：
模块不会继承对其他模块中声明的组件、指令或管道的访问权限。 AppModule 导入的内容与 ContactModule 无关，反之亦然。 在 ContactComponent 可以与 [(ngModel)] 绑定之前，它的 ContactModule 必须导入 FormsModule。
我在使用 Angular 7 时遇到了同样的问题。只需在 app.module.ts 文件中导入以下内容。
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
然后将 FormsModule 和 ReactiveFormsModule 添加到您的导入数组中。
imports: [
FormsModule,
ReactiveFormsModule
],
由于缺少 FormsModule,ReactiveFormsModule 的导入而出现此问题。我也遇到了同样的问题。 我的情况是不同的。 因为我正在使用模块。所以我错过了父模块中的上述导入，尽管我已将其导入子模块，但它无法正常工作。
然后我将它导入到我的父模块中，如下所示，它起作用了！
import { ReactiveFormsModule,FormsModule } from '@angular/forms';
import { AlertModule } from 'ngx-bootstrap';
@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
],
declarations: [MyComponent]
})
不要像我一样笨。 我遇到了与上述相同的错误，并且以前的答案中的任何选项都不起作用。 然后我意识到我在FormGroup中大写了“F”。 嗬！
代替：
[FormGroup]="form"
做：
[formGroup]="form"
您的 Angular 版本是 11+，并且您使用 VisualStudioCode？
并且您已经导入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
});
}
<form [formGroup]="form" (ngSubmit)="submit()">
<!-- MY FORM CONTROLS ARE ALREADY HERE -->
</form>
然后只需简单地重新启动您的 VisualStudioCode :)
我在尝试进行 e2e 测试时遇到了这个错误，这让我发疯了，没有答案。
如果您正在进行测试，请找到您的 *.specs.ts 文件并添加：
import {ReactiveFormsModule, FormsModule} from '@angular/forms';
对于在这些线程中浏览此错误的人。 就我而言，我有一个共享模块，我只导出了 FormsModule 和 ReactiveFormsModule 而忘记导入它。 这导致了一个奇怪的错误，即表单组在子组件中不起作用。 希望这可以帮助人们摸不着头脑。
简单的解决方案：
第 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 { }
一点注意事项：小心加载器并最小化（Rails env。）：
在看到这个错误并尝试了所有解决方案后，我意识到我的 html 加载器有问题。
我已经将我的 Rails 环境设置为使用这个加载器（ config/loaders/html.js. ）成功地为我的组件导入 HTML 路径：
module.exports = {
test: /\.html$/,
use: [ {
loader: 'html-loader?exportAsEs6Default',
options: {
minimize: true
}
}]
}
经过几个小时的努力和无数的 ReactiveFormsModule 导入，我看到我的formGroup是小写字母： formgroup 。
这让我找到了加载器，并且它在最小化时将我的 HTML 降级了。
更改选项后，一切正常，我可以再次哭泣。
我知道这不是问题的答案，但对于未来的 Rails 访问者（以及其他使用自定义加载器的人），我认为这可能会有所帮助。
在你的 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 文件有任何问题，它不会引发编译时错误。
如果您在开发组件时遇到此问题，则应将这两个模块添加到您最近的模块中：
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();
});
});
ReactiveFormsModule和FormsModule导入应该添加到您的自定义组件模块及其调用它的父组件中。
例如，我需要为我的过滤器组件添加表单。 所以我应该在我的过滤器模块及其父页面（可能是列表）模块中添加这个导入，从那里点击这个过滤器按钮。
使用和导入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 { }
注意：如果您在子模块的组件中工作，那么您只需在子模块而不是父应用程序根模块中导入ReactiveFormsModule 。
在对应的模块中导入ReactiveFormsModule 。
如果这只是一个 TypeScript 错误，但表单上的一切正常，则可能只需要重新启动 IDE。
我有同样的问题。 确保如果使用子模块（例如，您不仅有 app.component.module.ts），而且有单独的组件（例如 login.module.ts），则在此login.module.ts导入中包含 ReactiveFormsModule 导入，让它工作。 我什至不必在我的 app.component.module 中导入 ReactiveFormsModule，因为我对所有内容都使用了子模块。
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 {}
我在这里尝试了几乎所有的解决方案，但我的问题有点不同（愚蠢）。 我在路由模块中添加了组件，但没有包含它的主模块。 因此，请确保您的组件是模块的一部分。
当您在模态（入口组件）中有一个 formGroup 时，您还必须在实例化模态的模块中导入 ReactiveFormsModule 。
从'@angular/forms'导入 { FormsModule, ReactiveFormsModule }； 并将其添加到 app-module.ts 文件中的 imports 数组中。
即使您已经导入FormsModule和ReactiveFormsModule ，您也会收到此错误消息。 我将一个组件（使用[formGroup]指令）从一个项目移动到另一个项目，但未能将该组件添加到新模块的declarations数组中。 这导致Can't bind to 'formGroup' since it isn't a known property of 'form' 。
在过去的 3 天里，我一直在努力解决这个错误。 我在我的两个模块中添加了上面评论中提到的 ReactiveFormsModule 和 FormsModule，但是直到我用另一个“ng serve”重新加载我的项目之前它没有效果。 我不知道为什么它没有自动重新加载，但至少我很高兴它终于工作了！ 请问有什么解释吗？
您需要在此模块以及顶层导入FormsModule 、 ReactiveFormsModule 。
如果您在另一个模块中使用了reactiveForm ，那么您还必须与上述步骤一起执行此步骤：在该特定模块中也导入reactiveFormsModule 。
例如：
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
AppRoutingModule,
HttpClientModule,
BrowserAnimationsModule
],
如果遇到此类问题，我们必须重点关注三个要点。
ReactiveFormsModule, FormsModule 。declarations: [ ProjectComponent ]像这样。 import {MatRadioModule} from '@angular/material/radio'; @NgModule({ declarations: [ ], imports: [ ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
Can't bind to 'formGroup' since it isn't a known property of 'form'
意味着您尝试使用 angular ( [prop] ) 绑定属性，但 angular 找不到他知道的关于该元素的任何内容（在本例中为form ）。
这可能是由于不使用正确的模块（在某处缺少导入）而发生的，有时只会导致错字，例如：
[formsGroup] ， form后有s
在 app.modual.ts 文件中导入以下行并在 Angular cli 中运行命令ng s -o 。
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
如果您正确地导入了 FormModule 和 ReactiveFormModule，则可能还有另一个问题。 也许您没有将您的组件添加到应用程序模块中的模块声明中。 因此，将您的组件添加到 app.module.ts 声明中：
@NgModule({
declarations: [
YourNewComponent
]
})
对于 Angular 14 和使用带路由的子模块的人
我的问题与在路由中使用子模块有关。 要使其工作，请执行以下三个步骤：
1- 在 app.module 中
imports: [
//other-modules
ReactiveFormsModule
]
2- 在子模块中
imports: [
//other-modules
ReactiveFormsModule
]
3- 在 app-routing.module 添加以下路由（我的模块被命名为 AuthModule）
{
path: 'signup',
component: SignUpComponent,
children: [
{
path: '',
loadChildren: () =>
import('./features/auth/auth.module').then((m) => m.AuthModule),
},
]
},
希望有一天这对某人有所帮助！
我的解决方案很微妙，我还没有看到它已经列出来。
我在app.module.ts中未声明的 Angular Materials Dialog 组件中使用了反应形式。 主要组件在app.module.ts中声明，并会打开对话框组件，但对话框组件未在app.module.ts中显式声明。
我正常使用对话框组件没有任何问题，只是每当我打开对话框时表单都会抛出此错误：
无法绑定到“formGroup”，因为它不是“form”的已知属性。
我有同样的问题，问题实际上只是我忘记导入和声明在模块中保存表单的组件：
import { ContactFormComponent } from './contact-form/contact-form.component';
@NgModule({
declarations: [..., ContactFormComponent, ...],
imports: [CommonModule, HomeRoutingModule, SharedModule]
})
export class HomeModule {}
需要在这个模块中导入FormsModule、ReactiveFormsModule
如果您在另一个模块中使用了 reactiveForm，那么您还必须与上述步骤一起执行此步骤：在该特定模块中也导入 reactiveFormsModule。
例如：
imports: [
FormsModule,
ReactiveFormsModule,
],
我没有看到这里描述的这个特定的失败机制，也没有看到这个问题中其他地方对public-api.ts任何引用，所以添加它以防它帮助其他人。
我在功能模块中使用 Reactive Forms 构建了一个组件。 按照其他答案中描述的指导，我的模块构建没有问题，直到我尝试通过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';
如果，
已导入
import { FormsModule, ReactiveFormsModule } from '@angular/forms';`
在 rootModule & customComponentModule & 仍然得到错误
NG8002：无法绑定到“formGroup”，因为它不是“form”的已知属性
只是，
重启你的应用服务器
这将解决问题
您可以导入 formModule 和 reactiveFormModule
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [
ContactComponent
],
imports: [
CommonModule,
ContactRoutingModule,
FormsModule,
ReactiveFormsModule
]
})
export class ContactModule { }
formGroup 拼写检查：你会认为我是一个愚蠢的人，但它发生在我身上。
我已经导入了仍然无法绑定到“formGroup”的所有内容，因为它不是“form”错误的已知属性。
为什么因为在组件 html 文件中，我在使用 formGroup 时添加了 FormGroup。
请参阅以下链接以获取完整的解决方案： https://www.angularjswiki.com/angular/cant-bind-to-formgroup-since-it-is-not-a-known-property-of-form/
在您的 <compon.net.module.ts> 父级中添加“ReactiveFormsModule”
import { NgModule } from '@angular/core';
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
@NgModule({
declarations: [
.....
],
imports: [
.....
FormsModule,
ReactiveFormsModule
]
})
export class InvoiceModule { }
假设您的应用程序结构如下：
AnotherModule
<your_form>AppModule 根据您的表单类型在AnotherModule中导入ReactiveFormsModule或FormsModule 。
确保将AnotherModule导入AppModule 。
无法绑定到'FormGroup'，因为它不是'form'的已知属性----
[英]Can't bind to 'FormGroup' since it isn't a known property of 'form' ----
无法绑定到“ FormGroup”，因为它不是“ form”的已知属性。 （”
[英]Can't bind to 'FormGroup' since it isn't a known property of 'form'. ("
Angular 6：无法绑定到“FormGroup”，因为它不是“form”的已知属性
[英]Angular 6: Can't bind to 'FormGroup' since it isn't a known property of 'form'
未捕获的错误：模板解析错误：无法绑定到“ FormGroup”，因为它不是“ form”的已知属性
[英]Uncaught Error: Template parse errors: Can't bind to 'FormGroup' since it isn't a known property of 'form'
模板解析错误：无法绑定到“ formGroup”，因为它不是“ form”的已知属性
[英]Template parse errors: Can't bind to 'formGroup' since it isn't a known property of 'form'
无法绑定到“ formGroup”，因为它不是“ form”的已知属性-Angular 8 Ionic 4
[英]Can't bind to 'formGroup' since it isn't known property of 'form' - Angular 8 Ionic 4
无法绑定到“ formGroup”，因为它不是角度7中“ form”的已知属性
[英]Can't bind to 'formGroup' since it isn't a known property of 'form' in angular 7
Angular 10 - 无法绑定到“formGroup”，因为它不是“form”的已知属性
[英]Angular 10 - can't bind to 'formGroup' since it isn't a known property of 'form'
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.