't bind to ' formGroup ' since it isn' t 'form'的已知属性-Java 学习之路

379

THE SITUATION:

请帮忙！我试图在我的Angular2应用程序中制作一个非常简单的形式，但不管它从不起作用 .

ANGULAR VERSION:

Angular 2.0.0 Rc5

THE ERROR:

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

enter image description here

THE CODE:

风景：

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

THE QUESTION:

为什么我会收到这个错误？

我错过了什么吗？

12 回答

4

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

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

这可以通过不使用正确的模块（在某处某处丢失导入）来实现，有时只会导致错误：

[formsGroup] ， s 后 s

回复于 2024-04-26T00:03:34+08:00
86
RC5 FIX

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

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

RC6/RC7/Final release FIX

要修复此错误，您只需要从模块中的 @angular/forms 导入 ReactiveFormsModule . 以下是 ReactiveFormsModule import的基本模块示例：
```
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上阅读更多相关信息 .
回复于 2024-04-26T00:03:34+08:00
-1
好的经过一些挖掘后，我找到了“无法绑定到'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 . 希望这有助于任何人 .
回复于 2024-04-26T00:03:34+08:00
50
使用Angular 4时，建议的答案对我不起作用 . 相反，我必须使用attribute binding的另一种方式 attr 前缀：
```
<element [attr.attribute-to-bind]="someValue">
```
回复于 2024-04-26T00:03:34+08:00

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

回复于 2024-04-26T00:03:34+08:00

11

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

回复于 2024-04-26T00:03:34+08:00

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

回复于 2024-04-26T00:03:34+08:00

4
A LITTLE NOTE: Be careful about loaders and minimize (Rails env.):

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

我已经设置了我的Rails环境，以便使用此加载器成功导入组件的HTML路径（ config/loaders/html.js. ）：
```
module.exports = {
  test: /\.html$/,
  use: [ {
    loader: 'html-loader?exportAsEs6Default',
    options: {
      minimize: true
    }
  }]
}
```
经过几个小时的努力和无数的ReactiveFormsModule导入后，我看到我的 formGroup 是小写字母： formgroup .

这导致了我的加载器以及它在最小化时降低了我的HTML的事实 .

更改选项后，一切都按预期工作，我可以再次回去哭泣 .

我知道这不是问题的答案，但对于未来的Rails访问者（以及其他定制加载器）我认为这可能会有所帮助 .
回复于 2024-04-26T00:03:34+08:00
766
我在尝试进行e2e测试时遇到了这个错误，这让我很生气，因为没有答案 .

如果您正在进行测试， *find your .specs.ts file 并添加：
```
import {ReactiveFormsModule, FormsModule} from '@angular/forms';
```
回复于 2024-04-26T00:03:34+08:00
1
由于缺少FormsModule，ReactiveFormsModule的导入而发生此问题 . 我也遇到了同样的问题 . 我的情况是差异 . 因为我正在使用模块 . 所以我在我的父模块中错过了上面的导入，虽然我已将其导入子模块，但它无法正常工作 .

然后我将它导入我的父模块，如下所示， it worked!
```
import { ReactiveFormsModule,FormsModule  } from '@angular/forms';
import { AlertModule } from 'ngx-bootstrap';

         @NgModule({
          imports: [
            CommonModule,
            FormsModule,
            ReactiveFormsModule,
    ],
      declarations: [MyComponent]
    })
```
回复于 2024-04-26T00:03:34+08:00

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

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

回复于 2024-04-26T00:03:34+08:00

14

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

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

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

回复于 2024-04-26T00:03:34+08:00

't bind to ' formGroup ' since it isn' t 'form'的已知属性

12 回答

相关问题