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

情况：

请帮忙！我正在尝试使Angular2应用程序中的表单变得非常简单，但是不管它永远无法工作。

角版本：

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

问题：

为什么会出现该错误？

我想念什么吗？

RC5修复

您需要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的官方文档页面上了解更多有关它的信息。

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.module.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。希望这对任何人有帮助。

我在组件的单​​元测试期间遇到了此错误（仅在测试期间，在其正常工作的应用程序内）。解决的办法是进口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();
    }));
});

对于Angular 4，建议的答案对我不起作用。相反，我不得不使用另一种带有前缀的属性绑定方法attr：

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

如果您必须导入两个模块，则在下面添加如下内容

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

请记住，如果已定义“功能模块”，则即使已导入到功能模块，也需要导入功能模块AppModule。从Angular文档中：

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

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

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

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

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

imports: [
  FormsModule,
  ReactiveFormsModule
],

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

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

[FormGroup] =“ form” 大写F代替小f

[formsGroup] =“形式” 额外小号形式后

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

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

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

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

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

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

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

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

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

简单的解决方案：

步骤1：导入ReactiveFormModule

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

步骤2：将“ ReactiveFormsModule”添加到导入部分

imports: [

    ReactiveFormsModule
  ]

步骤3：重新启动App并完成

范例：

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

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

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

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

代替：

[FormGroup]="form"

做：

[formGroup]="form"

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

我遇到了同样的问题，请确保如果使用子模块（例如，您不仅具有app.component.module.ts，而且具有单独的组件（例如login.module.ts），并且您在此登录名中包含ReactiveFormsModule导入.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 {}

可以帮助某人：

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

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

表示您尝试使用angular（[prop]）绑定属性，但是angular无法找到他对该元素知道的任何信息（在这种情况下form）。

这可能是由于未使用正确的模块（在某处缺少导入）而发生的，有时甚至会导致输入错误，例如：

[formsGroup]，s之后form

我的解决方案很微妙，我还没有列出。

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

我正常使用对话框组件没有任何问题，除了每次打开对话框时表单都会抛出此错误。

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

将模块添加到AppModule所有内容后，一切正常。