我刚看到这个question,但我仍然有同样的错误。我有一个共享模块,我导入到我的功能模块。但我也尝试直接将FormsModule
,ReactiveFormsModule
模块导入我的功能模块。
Angular 2.0最终版本。
我的共享模块是:
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 { }
我的功能模块:
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() {}
}
组件:
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]
});
...
}
观点:
<form class="container" (ngSubmit)="authenticate()" [ERROR ->][FormGroup]="loginForm">
....
</form>
所有路径和导入都是正确的。有任何想法吗?感谢。
------ [求助] -------
为[FormGroup]="loginForm"
更改[formGroup]="loginForm"
:(
答案 0 :(得分:16)
解决方案:
import { ReactiveFormsModule } from '@angular/forms'
将此模块导入 app.module.ts 或您的组件类。 (建议在app.module.ts中导入)。
然后直接... ex:---
imports: [
ReactiveFormsModule
]
答案 1 :(得分:1)
您可能错过了将ReactiveFormsModule模块导入[yourmoduleName] .module.ts
import { FormGroup, FormControl, FormBuilder, Validator, ReactiveFormsModule } from '@angular/forms';
并在下面添加导入您使用formBuilder或formGroup
的组件 imports: [ReactiveFormsModule]