无法绑定到 'formGroup'，因为它不是 'form' 的已知属性

Question

情况

我正在尝试在我的 Angular 应用程序中创建一个应该非常简单的表单，但无论如何，它都行不通。

Angular版本

Angular 2.0.0 RC5

错误

Can't bind to 'formGroup' since it isn't a known property of '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)
    }
}

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 { }

问题

为什么会出现该错误？我错过了什么吗？

Answer 1

RC6/RC7/Final 发布 FIX

要修复此错误，您只需在模块中从 @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 FIX

您需要在您的控制器中 import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms' 并将其添加到 @Component 中的 directives。这将解决问题。

修复该问题后，您可能会收到另一个错误，因为您没有在表单中的输入中添加 formControlName="name"。

Answer 2

对于 Angular 4，建议的答案对我不起作用。相反，我不得不使用另一种 attribute binding 的方式和 attr 前缀：

<element [attr.attribute-to-bind]="someValue">

Answer 3

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 { }

Answer 4

请记住，如果您定义了 "Feature Modules"，则需要在功能模块中导入，即使您已经导入到 AppModule。来自 Angular 文档：

Modules don't inherit access to the components, directives, or pipes that are declared in other modules. What AppModule imports is irrelevant to ContactModule and vice versa. Before ContactComponent can bind with [(ngModel)], its ContactModule must import FormsModule.

https://angular.io/docs/ts/latest/guide/ngmodule.html

Answer 5

如果你必须导入两个模块然后像下面这样添加

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]
})

Answer 6

好的，经过一番挖掘，我找到了 "Can't bind to 'formGroup' since it isn't a known property of '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。希望这对任何人都有帮助。

Answer 7

对于浏览这些线程的人有关此错误的信息。在我的例子中，我有一个共享模块，我只导出了 FormsModule 和 ReactiveFormsModule 而忘了导入它。这导致了一个奇怪的错误，即表单组在子组件中不起作用。希望这可以帮助人们挠头。

Answer 8

我在尝试进行端到端测试时遇到了这个错误，这让我发疯，因为没有答案。

如果您正在进行测试，找到您的 *.specs.ts 文件 并添加：

import {ReactiveFormsModule, FormsModule} from '@angular/forms';

Answer 9

Can't bind to 'formGroup' since it isn't a known property of 'form'

表示您尝试使用 angular ([prop]) 绑定属性但 angular 无法找到他所知道的该元素的任何信息（在本例中 form).

这可能是因为没有使用正确的模块（途中某处缺少导入），有时只会导致错字，例如：

[formsGroup]，s 在 form

之后

Answer 10

我在对一个组件进行单元测试时遇到过这个错误（仅在测试期间，在应用程序中它正常工作）。解决方案是在 .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();
    }));
});

Answer 11

由于缺少 FormsModule、ReactiveFormsModule 的导入而出现此问题。我也遇到了同样的问题。我的情况不同。当我使用 modules.So 时，我错过了父模块中的上述导入，尽管我已将其导入子模块，但它没有用。

然后我将它导入到我的父模块中，如下所示，它成功了！

import { ReactiveFormsModule,FormsModule  } from '@angular/forms';
import { AlertModule } from 'ngx-bootstrap';

         @NgModule({
          imports: [
            CommonModule,
            FormsModule,
            ReactiveFormsModule,
    ],
      declarations: [MyComponent]
    })

Answer 12

注意事项：注意装载程序并尽量减少（Rails 环境）：

在看到这个错误并尝试了所有解决方案后，我意识到我的 html 加载器出了点问题。

我已将我的 Rails 环境设置为使用此加载器成功为我的组件导入 HTML 路径 (config/loaders/html.js.):

module.exports = {
  test: /\.html$/,
  use: [ {
    loader: 'html-loader?exportAsEs6Default',
    options: {
      minimize: true
    }
  }]
}

经过几个小时的努力和无数次 ReactiveFormsModule 导入后，我看到我的 formGroup 是小写字母：formgroup。

这让我找到了加载程序，事实上它在最小化时缩小了我的 HTML。

更改选项后，一切正常，我又可以回去哭了。

I know that this is not an answer to the question, but for future Rails visitors (and other with custom loaders) i think this could be helpfull.

Answer 13

我遇到了与 Angular 7 相同的问题。只需在您的 app.module.ts 文件中导入以下内容即可。

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

然后将 FormsModule 和 ReactiveFormsModule 添加到您的导入数组中。

imports: [
  FormsModule,
  ReactiveFormsModule
],

Answer 14

在您的 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 文件中有任何错误，它不会抛出编译时错误。

Answer 15

使用并导入 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 { }

Answer 16

如果你在开发组件的时候遇到这个问题，你应该将这两个模块添加到离你最近的模块中：

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();
  });
});

Answer 17

假设您的应用结构如下：

AnotherModule
- <your_form>
AppModule

根据您的表单类型在 AnotherModule 中导入 ReactiveFormsModule 或 FormsModule。

确保 AnotherModule 已导入 AppModule。

Answer 18

别像我一样笨。我遇到了与上述相同的错误，之前答案中的 none 选项有效。然后我意识到我在 FormGroup 中大写了 'F'。呸！

而不是：

[FormGroup]="form"

做：

[formGroup]="form"

Answer 19

该错误表示在此模块中无法识别 FormGroup。因此，您必须在使用 FormGroup

的 每个模块 中导入这些（下方）模块

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

然后将 FormsModule 和 ReactiveFormsModule 添加到您的 Module 的 导入数组中。

imports: [
  FormsModule,
  ReactiveFormsModule
],

你可能会想，我已经在AppModule中添加了它，它应该继承它吗？但事实并非如此。因为这些模块正在导出仅在导入模块中可用的必需指令。在 Sharing modules.

中阅读更多内容

造成这些错误的其他因素可能是如下所示的拼写错误...

[FormGroup]="form" 大写 F 而不是小 f

[formsGroup]="form" 额外 s 在 form

之后

Answer 20

注意： 如果您在子模块的组件内部工作，那么您只需在子模块而不是父应用程序根模块中导入 ReactiveFormsModule。

Answer 21

在对应模块中导入ReactiveFormsModule

Answer 22

如果这只是一个 TypeScript 错误，但您的表单上的所有内容都正常，您可能只需要重新启动 IDE。

Answer 23

我遇到了同样的问题。确保如果使用 submodules（例如，你不仅有 app.component.module.ts），而且你有一个单独的组件，例如 login.module.ts，你包括 ReactiveFormsModule import在这个 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 {}

Answer 24

当模态（入口组件）中有一个 formGroup 时，您还必须在实例化模态的模块中导入 ReactiveFormsModule。

Answer 25

简单的解决方法：

第 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 { }

Answer 26

我的解决方案很微妙，我没有看到它已经列出。

我在未在 app.module.ts 中声明的 Angular 材质对话框组件中使用反应形式。主要组件在 app.module.ts 中声明，将打开对话框组件，但对话框组件未在 app.module.ts 中明确声明。

我正常使用对话框组件时没有遇到任何问题，只是每次打开对话框时表单都会抛出此错误：

Can't bind to 'formGroup' since it isn't a known property of 'form'.

Answer 27

首先，与Angular版本>2无关。只需在您的 app.module.ts 文件中导入以下内容即可解决问题。

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

然后将 FormsModule 和 ReactiveFormsModule 添加到您的导入数组中。

imports: [
  FormsModule,
  ReactiveFormsModule
],

注意：您也可以将 ReactiveFormsModule 导入特定模块而不是 app.module.ts

Answer 28

我有同样的问题，问题实际上只是我忘记导入和声明在模块中保存表单的组件：

import { ContactFormComponent } from './contact-form/contact-form.component';

@NgModule({
    declarations: [..., ContactFormComponent, ...],
    imports: [CommonModule, HomeRoutingModule, SharedModule]
})
export class HomeModule {}

Answer 29

从'@angular/forms'导入{FormsModule, ReactiveFormsModule}; 并将其添加到 app-module.ts 文件的 imports 数组中。

Answer 30

即使您已经导入了 FormsModule 和 ReactiveFormsModule，您也会收到此错误消息。我将一个组件（使用 [formGroup] 指令）从一个项目移动到另一个项目，但未能将组件添加到新模块中的 declarations 数组。这导致 Can't bind to 'formGroup' since it isn't a known property of 'form' 错误消息。

Answer 31

过去 3 天我一直在为这个错误而苦苦挣扎。我在我的两个模块中添加了上面评论中提到的 ReactiveFormsModule 和 FormsModule，但直到我用另一个“ng serve”重新加载我的项目时它才起作用。我不知道为什么它没有自动重新加载，但至少我很高兴它终于起作用了！有什么解释吗？

Answer 32

您需要在此模块以及顶层中导入 FormsModule、ReactiveFormsModule。

如果您在另一个模块中使用了 reactiveForm，那么您还必须执行此步骤以及上述步骤：在该特定模块中也导入 reactiveFormsModule。

例如：

imports: [
  BrowserModule,
  FormsModule,
  ReactiveFormsModule,
  AppRoutingModule,
  HttpClientModule,
  BrowserAnimationsModule
],

Answer 33

在 app.modual.ts 文件和运行命令 ng s -o 中导入下面的行 angular cli.

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

Answer 34

您需要在该模块中导入FormsModule、ReactiveFormsModule

如果您在另一个模块中使用了 reactiveForm，那么您还必须执行此步骤以及上述步骤：在该特定模块中也导入 reactiveFormsModule。

例如：

imports: [
  FormsModule,
  ReactiveFormsModule,
  
],

Answer 35

你的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 :)

Answer 36

我在这里尝试了几乎所有的解决方案，但我的问题有点不同（愚蠢）。我在路由模块中添加了组件，但没有将其包含在主模块中。因此，请确保您的组件是模块的一部分。

Answer 37

我没有看到此处描述的这种特定故障机制或此问题中其他地方对 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';

Answer 38

应将 ReactiveFormsModule 和 FormsModule 导入添加到您的自定义组件模块及其被调用的父组件中。

例如，我需要为我的过滤器组件添加表单。所以我应该在我的过滤器模块及其父页面（可能是列表）模块中添加这个导入，从那里点击这个过滤器按钮。

Answer 39

遇到此类问题需要关注的三个要点

在任何共享或应用程序模块中导入 ReactiveFormsModule, FormsModule。
如果您创建了一个共享模块，然后将其导入到您正在使用表单组的模块中，并且
检查组件是否在 declarations: [ ProjectComponent ]像这样。

Answer 40

如果，
已经导入

import { FormsModule, ReactiveFormsModule } from '@angular/forms';`

在 rootModule 和 customComponentModule 中，仍然出现错误

NG8002: Can't bind to 'formGroup' since it isn't a known property of 'form'

只是，

Restart you Application server

这将解决问题

Answer 41

您可以导入 formModule 和 reactiveFormModule

import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';


@NgModule({
    declarations: [
        ContactComponent
    ],
    imports: [
        CommonModule,
        ContactRoutingModule,
        FormsModule,
        ReactiveFormsModule
    ]
})
export class ContactModule { }

Answer 42

转到：app.module.ts
进口：[ .... ReactiveFormsModule ]
添加：从“@angular/forms”导入{ReactiveFormsModule}；
它应该是这样的：

import {MatRadioModule} from '@angular/material/radio';

@NgModule({
  declarations: [
  
  ],
  imports: [
    
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

无法绑定到 'formGroup'，因为它不是 'form' 的已知属性

Can't bind to 'formGroup' since it isn't a known property of 'form'

typescript

angular2-forms

angular

情况

Angular版本

错误

密码

景色

控制器

ngModule

问题

文件login.module.ts

无法绑定到 'formGroup'，因为它不是 'form' 的已知 属性

Can't bind to 'formGroup' since it isn't a known property of 'form'

typescript

angular2-forms

angular

情况

Angular版本

错误

密码

景色

控制器

ngModule

问题

文件login.module.ts

无法绑定到 'formGroup'，因为它不是 'form' 的已知属性