typescript 无法绑定到 FormGroup，因为它不是“表单”的已知属性（已加载 FormsModule、ReactiveFormsModule）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39657332/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can't bind to FormGroup since it isn't a known property of 'form' (FormsModule, ReactiveFormsModule loaded)
提问by Javier RB
I've just seen this questionbut I still have the same error. I have a shared module which I import to my feature module. But I also tried import FormsModule, ReactiveFormsModulemodules to my feature module directly.
我刚刚看到这个问题，但我仍然有同样的错误。我有一个共享模块，我将其导入到我的功能模块中。但我也试过 import FormsModule, ReactiveFormsModulemodules 直接到我的功能模块。
Angular 2.0 Final version.
Angular 2.0 最终版。
My shared module is:
我的共享模块是：
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { UPLOAD_DIRECTIVES } from 'ng2-uploader/ng2-uploader';
import { UploadComponent } from './upload/index';
import { AuthenticationService } from './services/index';
@NgModule({
declarations: [ UploadComponent, UPLOAD_DIRECTIVES ],
imports: [ CommonModule ],
providers: [ AuthenticationService ],
exports: [
FormsModule,
CommonModule,
UploadComponent,
ReactiveFormsModule
]
})
export class SharedModule { }
My feature module:
我的功能模块：
import { NgModule } from '@angular/core';
import { SharedModule } from '../shared/shared.module';
import { LoginComponent } from './login.component';
@NgModule({
imports: [ SharedModule ],
declarations: [ LoginComponent ],
exports: [ LoginComponent ]
})
export class LoginModule {
constructor() {}
}
The component:
组件：
import { Component } from '@angular/core';
import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
import { AuthenticationService } from '../shared';
@Component({
selector: 'pol-login',
templateUrl: 'login.component.html'
})
export class LoginComponent {
loginForm: FormGroup;
notValidCredentials: boolean = false;
showUsernameHint: boolean = false;
constructor(
fb: FormBuilder,
private authenticationService: AuthenticationService) {
this.loginForm = fb.group({
username: ['', Validators.compose([Validators.required, this.emailValidator])],
password: ['', Validators.required]
});
...
}
And the view:
和观点：
<form class="container" (ngSubmit)="authenticate()" [ERROR ->][FormGroup]="loginForm">
....
</form>
All paths and imports are correct. Any ideas? Thanks.
所有路径和导入都是正确的。有任何想法吗？谢谢。
------ [SOLVED] -------
- - - [解决了] - - - -
Changed [FormGroup]="loginForm"for [formGroup]="loginForm":(
更改[FormGroup]="loginForm"为[formGroup]="loginForm":(
回答by Deepak swain
Solution:
解决方案：
import { ReactiveFormsModule } from '@angular/forms'
Import this module to app.module.tsor Your Component Class. ( Recommended to import in app.module.ts ).
将此模块导入app.module.ts或您的组件类。（建议在 app.module.ts 中导入）。
Then Direct it...ex:---
然后直接它...例如：---
imports: [
ReactiveFormsModule
]
回答by Gampesh
May be you missed to import ReactiveFormsModule module to your [yourmoduleName].module.ts
可能你错过了将 ReactiveFormsModule 模块导入你的 [yourmoduleName].module.ts
import { FormGroup, FormControl, FormBuilder, Validator, ReactiveFormsModule } from '@angular/forms';
and add below import your component where you are using formBuilder or formGroup
并在下面添加导入您使用 formBuilder 或 formGroup 的组件
imports: [ReactiveFormsModule]
imports: [ReactiveFormsModule]
