我正在尝试创建一个具有两个功能模块(延迟加载),public和admin的应用程序。在公共模块中,我正在创建一个登录表单。在App Module中,我导入了ReactiveFormsModule。以下是login.component.ts文件代码
import { AppService } from './../../app.service';
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
loginForm: FormGroup;
constructor(private service: AppService) { }
ngOnInit() {
this.loginForm = new FormGroup({
'email': new FormControl(null),
'password': new FormControl(null)
});
}
onSubmit() {
console.log(this.loginForm);
}
}
和相应的html文件代码是
<section>
<form class="form-signin" [formGroup]="loginForm" (ngSubmit)="onSubmit()">
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" formControlName="email" required autofocus email>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" formControlName="password" required>
<button class="btn btn-lg btn-primary btn-block" type="submit">Submit</button>
<p class="mt-5 mb-3 text-muted">© 2017-2018</p>
</form>
</section>
以下是AppModule.ts文件
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
当我这样做时,我在浏览器控制台面板中收到以下错误
ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'formGroup' since it isn't a known property of 'form'. ("<section>
<form class="form-signin" [ERROR ->][formGroup]="loginForm" (ngSubmit)="onSubmit()">
<h1 class="h3 mb-3 font-weight-normal">Please"): ng:///PublicRoutingModule/LoginComponent.html@1:28
Error: Template parse errors:
Can't bind to 'formGroup' since it isn't a known property of 'form'. ("<section>
<form class="form-signin" [ERROR ->][formGroup]="loginForm" (ngSubmit)="onSubmit()">
<h1 class="h3 mb-3 font-weight-normal">Please"): ng:///PublicRoutingModule/LoginComponent.html@1:28
请帮忙
答案 0 :(得分:1)
您的模块应导入FormsModule, ReactiveFormsModule
。
答案 1 :(得分:0)
将FormsModule
和ReactiveFormsModule
导入appmodule.ts
文件中。
import { FormsModule,ReactiveFormsModule} from '@angular/forms';