Question

情况：

请帮忙！我试图在我的Angular2应用程序中创建一个非常简单的表单，但无论它从不工作。

ANGULAR VERSION：

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

RC5 FIX

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

修复后，您可能会收到其他错误，因为您没有在表单中添加formControlName="name"。

RC6 / RC7 /最终版本FIX

要解决此错误，您只需从模块中的ReactiveFormsModule导入@angular/forms即可。以下是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上了解更多相关信息。

Answer 2

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 3

好好经过一番挖掘后，我找到了一个解决方案，而且＃34;无法绑定到＆＃39; formGroup＆＃39;因为它不是“形式”的已知属性。＆＃34;

就我而言，我一直在使用多个模块文件，我在app.module.ts中添加了ReactiveFormsModule

web

但是，当我使用另一个模块中添加的组件的[formGroup]指令时，这不起作用，例如：使用在author.module.ts文件中订阅的author.component.ts中的[formGroup]：

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

@NgModule({
  declarations: [
    AppComponent,
  ]
  imports: [
    FormsModule,
    ReactiveFormsModule,
    AuthorModule,
],
...

我想如果我在app.module.ts中添加了ReactiveFormsModule，默认情况下ReactiveFormsModule将由其所有子模块继承，例如本例中的author.module ...（错误！）。我需要在author.module.ts中导入ReactiveFormsModule，以使所有指令都能正常工作：

import { NgModule }       from '@angular/core';
import { CommonModule }   from '@angular/common';
import { AuthorComponent } from './author.component';

@NgModule({
  imports: [
    CommonModule,
  ],
  declarations: [
    AuthorComponent,
  ],
  providers: [...]
})

export class AuthorModule {}

因此，如果您使用的是子模块，请确保在每个子模块文件中导入ReactiveFormsModule。希望这对任何人都有帮助。

Answer 4

我在组件的单元测试期间遇到了这个错误（仅在测试期间，在应用程序中正常工作）。解决方案是在ReactiveFormsModule文件中导入.spec.ts：

// 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 5

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

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

Answer 6

如果您必须导入两个模块，请按以下方式添加

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 7

请注意，如果您已定义“功能模块”，则即使已导入AppModule，也需要在功能模块中导入。来自Angular文档：

模块不会继承对其他模块中声明的组件，指令或管道的访问权限。 AppModule导入的内容与ContactModule无关，反之亦然。在ContactComponent可以与[（ngModel）]绑定之前，其ContactModule必须导入FormsModule。

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

Answer 8

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

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

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

imports: [
  FormsModule,
  ReactiveFormsModule
],

Answer 9

由于缺少FormsModule，ReactiveFormsModule的导入而发生此问题。我也遇到了同样的问题。我的情况不同。因为我正在使用模块。所以我在我的父模块中错过了上面的导入，虽然我已将其导入子模块，但它没有工作。

然后我将其导入我的父模块，如下所示，它有效！

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

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

Answer 10

对于漫步这些线程的人来说这个错误。在我的情况下，我有一个共享模块，我只导出FormsModule和ReactiveFormsModule，忘了导入它。这导致了一个奇怪的错误，即formgroups在子组件中不起作用。希望这有助于人们摸不着头脑。

Answer 11

我在尝试进行e2e测试时遇到了这个错误，这让我很生气，因为没有答案。

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

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

Answer 12

简单的解决方案：

步骤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 13

该错误表明此模块无法识别FormGroup。因此，您必须将这些（下面的）模块导入使用 FormGroup

的每个模块中

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

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

imports: [
  FormsModule,
  ReactiveFormsModule
],

您可能会认为我已经在 AppModule 中添加了它，它应该继承吗？但事实并非如此。因为这些模块正在导出仅在导入模块中可用的必需指令。在此处阅读更多信息... https://angular.io/guide/sharing-ngmodules。

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

[FormGroup] =“ form” 大写字母 F 而不是小 f

[formsGroup] =“表单” 表单后额外的 s

Answer 14

可能会帮助某人：

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

Answer 15

你的 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 16

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

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

例如：

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

Answer 17

别像我一样傻。收到与上述相同的错误，该线程中的所有选项均无效。然后我意识到我在FormGroup中大写了“ F”。 h！

[FormGroup]="form"

Answer 18

使用和导入 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 19

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

Answer 20

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

Answer 21

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

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

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

imports: [
  FormsModule,
  ReactiveFormsModule
],

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

Answer 22

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

Answer 23

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

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

正常使用对话框组件时，我没有任何问题，只是每次打开对话框时，表单都会引发此错误。

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

Answer 24

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

Answer 25

你需要在这个模块中导入FormsModule、ReactiveFormsModule

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

例如：

imports: [
  FormsModule,
  ReactiveFormsModule,
  
],

Answer 26

在 app.modual.ts 文件中导入以下行并在 angular cli 中运行命令 ng s -o。

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

Answer 27

在过去3天内，我一直在努力解决此错误。我在两个模块中都添加了上面评论中提到的ReactiveFormsModule和FormsModule，但是直到我用另一个“ ng服务”重新加载项目后，它才起作用。我不知道为什么它没有自动重新加载，但至少我很高兴它终于可以工作了！请解释一下吗？

Answer 28

我遇到了同样的问题，实际上问题仅在于我忘记导入和声明在模块中保存表单的组件：

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

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

Answer 29

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

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 30

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

表示您尝试使用angular（[prop]）绑定属性，但是角度无法找到他知道该元素的任何内容（在本例中为form）。

这可能是因为没有使用正确的模块（在某个地方缺少导入），有时只会导致错误：

[formsGroup]，s之后form

Answer 31

我遇到了同样的问题，请确保如果使用子模块（例如，您不仅具有app.component.module.ts，而且还具有单独的组件，例如login.module。 ts，您在此 login.module.ts 导入中包含ReactiveFormsModule导入即可正常工作，我什至不必在我的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 32

如果这只是一个打字错误，但表单上的所有内容都可以正常工作，则可能只需重新启动IDE

Answer 33

在相应的模块中导入 ReactiveFormsModule

Answer 34

在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 35

一旦我将模块添加到AppModule，一切都会开始正常运行。

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

35 个答案: