无法绑定到'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's official docs page上阅读更多相关信息。

Answer 2

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

Answer 3

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

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

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

Answer 4

小提示：小心加载器并最小化（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 5

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

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

意味着你尝试使用angular（[prop]）来绑定属性，但是角度无法找到他知道该元素的任何东西（在本例中为form）。

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

[formsGroup]，s之后的form

Answer 7

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

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 9

好的经过一些挖掘后，我找到了“无法绑定到'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。希望这有助于任何人。

Answer 10

我在组件的单元测试期间遇到了这个错误（仅在测试期间，在应用程序中正常工作）。解决方案是在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 11

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

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

Answer 12

如果你必须导入两个模块，那么添加如下

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 13

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

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

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

Answer 14

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

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

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

imports: [
  FormsModule,
  ReactiveFormsModule
],

Answer 15

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

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

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

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

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

问题描述投票：500回答：15

15个回答

最新问题

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

问题描述 投票：500回答：15

15个回答

最新问题

问题描述投票：500回答：15