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

Question

情况:

请帮忙!我试图在我的Angular2应用程序中制作一个非常简单的表单,但无论它从不工作.

角度版本:

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的官方文档页面上阅读更多相关信息.

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

好的经过一些挖掘后,我找到了"无法绑定到'formGroup'的解决方案,因为它不是'form'的已知属性."

对于我的情况,我一直在使用多个模块文件,我在app.module.ts中添加了ReactiveFormsModule

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

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

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

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

1. 转到：app.module.ts
2. 导入：[ .... ReactiveFormsModule ]
3. 添加以下内容：从'@angular/forms'导入{ReactiveFormsModule}；
4. 它应该看起来像这样：

mport { ReactiveFormsModule } from '@angular/forms';

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

Answer 6

该错误表示此模块中无法识别 FormGroup。所以你必须在每个使用FormGroup 的模块中导入这些（下面）模块

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

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

imports: [
  FormsModule,
  ReactiveFormsModule
],

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

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

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

[formsGroup]="form"表单后的 额外s

Answer 7

使用Angular 4时,建议的答案对我不起作用.相反,我不得不使用另一种属性绑定方式与attr前缀:

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

Answer 8

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

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

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

imports: [
  FormsModule,
  ReactiveFormsModule
],

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

Answer 9

如果您有两个模块,那么添加如下

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 10

请记住,如果您已定义"功能模块",则需要在功能模块中导入,即使您已导入到功能模块AppModule.来自Angular文档:

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

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

Answer 11

错误 ex：错误 NG8002：无法绑定到“formGroup”，因为它不是“form”的已知属性。

我给出了可能的原因和解决方案，如果解决方案有效/有用，请投票并发表评论哪​​个解决方案适合您

场景一及建议：如果你只有一个模块或者错误出现在app组件中

您必须在模块中导入FormsModule,ReactiveFormsModule

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

imports: [
  FormsModule,
  ReactiveFormsModule,
],

场景2和建议：当您的应用程序包含多个模块时

在该特定模块/子模块（即最近的模块）中导入 FormsModule 和reactiveFormsModule

场景3和建议：如果您正确导入了FormModule和ReactiveFormModule，则可能会出现另一个问题。

也许您没有将组件添加到应用程序模块中的模块声明中。因此，将您的组件添加到模块声明中。

import { YourComponentName } from './example-file-path/your-component-name.component';

@NgModule({
  declarations: [
    YourComponentName
  ]
})

场景4和建议： 如果您按照上面提到的添加了ReactiveFormsModule和FormsModule。

尝试重新加载项目（重新启动 IDE）并再次启动服务器ng serve

。

Answer 12

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

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

然后将FormsModule和ReactiveFormsModule添加到imports数组中.

imports: [
  FormsModule,
  ReactiveFormsModule
],

Answer 13

在您的 <componenet.module.ts> 父级中添加“ReactiveFormsModule”

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

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

    ]
})
export class InvoiceModule { }

Answer 14

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

然后我将它导入我的父模块,如下所示,它工作!

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

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

Answer 15

不要像我一样傻。遇到与上述相同的错误，该线程中的所有选项均无效。然后我意识到我在FormGroup. 哦！

代替：

[FormGroup]="form"

做：

[formGroup]="form"

Answer 16

一点注意：小心加载器并最小化（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 访问者（以及其他使用自定义加载程序的人），我认为这可能会有所帮助。

Answer 17

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

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

Answer 19

和ReactiveFormsModuleimportFormsModule应该添加到您的自定义组件模块以及调用它的父组件中。

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

Answer 20

对于那些漫步于此错误的线程的人们。在我的情况下，我有一个共享模块，在这里我仅导出FormsModule和ReactiveFormsModule，却忘记了导入它。这引起了一个奇怪的错误，即表单组不能在子组件中工作。希望这可以帮助人们挠头。

Answer 21

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

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

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

Answer 22

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

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

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 24

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

Answer 25

在对应的模块中导入ReactiveFormsModule

Answer 26

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

Answer 27

我遇到了同样的问题，请确保如果使用子模块（例如，您不仅有 app.component.module.ts，而且还有一个单独的组件，例如 login.module.ts，您在此登录中包含 ReactiveFormsModule 导入.module.ts导入，让它工作。我什至不必在我的 app.component.module 中导入 ReactiveFormsModule 因为我对所有东西都使用子模块。

登录.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 28

简单的解决方案：

第 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 29

1. 你的 Angular 版本是 11+，你用的是 VisualStudioCode？

2. 并且您已经导入FormsModule，ReactiveFormsModule并将其添加到您的导入部分中，例如app.module.ts（相关模块可以不同，选择正确的模块）：

// app.module.ts (excerpt)
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
imports: [
  ...
  FormsModule,
  ReactiveFormsModule,
  ...
],

3. 您有正确的导入（有时还有其他具有相似名称的库）；您已经在组件中定义并初始化了表单吗？

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

4. 你的组件模板有你的形式：

// app.module.ts (excerpt)
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
imports: [
  ...
  FormsModule,
  ReactiveFormsModule,
  ...
],

5. 您仍然收到错误消息“...因为它不是...的已知属性”？

然后只需简单地重新启动您的 VisualStudioCode :)