[英]Template parse errors: Can't bind to 'formGroup' since it isn't a known property of 'form'
I have an angular routing , in one of the component i have simple login form and provide the formGroup in template ,which shows above error. 我有一个角度路由,在其中一个组件中有一个简单的登录表单,并在模板中提供了formGroup,它显示了上述错误。
Steps: Import the ReactiveFormsModule in app module. 步骤:在应用程序模块中导入ReactiveFormsModule。
In Routing components: 在“路由组件”中:
app.routingmodule.ts app.routingmodule.ts
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { LoginViewComponent } from './views/login/login.component';
import { HomeViewComponent } from './views/home/home.component';
import { CatalogViewComponent } from './views/catalog/catalog.component';
@NgModule({
declarations: [
LoginViewComponent, HomeViewComponent, CatalogViewComponent
],
imports: [
RouterModule.forRoot([
{ path: 'login', component: LoginViewComponent },
{ path: 'home', component: HomeViewComponent },
{ path: 'catalog', component: CatalogViewComponent },
{ path: '**', redirectTo: 'login' }
])
],
exports: [
RouterModule
],
providers: [],
})
export class AppRoutingModule {}
catalog.component.ts catalog.component.ts
import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';
import { FormControl, FormGroup } from '@angular/forms';
@Component({
selector: 'reactiveform',
templateUrl: 'catalog.component.html',
})
export class CatalogViewComponent implements OnInit {
form: FormGroup;
constructor() {
}
ngOnInit() {
this.form = new FormGroup({
name: new FormControl(''),
userName: new FormControl('')
});
console.log(this.form);
}
processForm() {
console.log("formProcessing" + this.form.value);
}
}
catalog.component.html catalog.component.html
<form [formGroup]="form" (ngSubmit)="processForm()" >
<div class="form-group">
<label for="name">Name </label>
<input type="text" class="form-control" name="name" formControlName="name" required>
</div>
<div class="form-group">
<label for="userName">Username </label>
<input type="text" class="form-control" name="userName" formControlName="userName" required>
</div>
<div class="form-group">
<button type="submit" class="btn btn-danger">Submit </button>
</div>
</form>
Demo URL: 演示网址:
https://stackblitz.com/edit/angular-router-basic-form?file=app%2Fviews%2Fcatalog%2Fcatalog.component.html https://stackblitz.com/edit/angular-router-basic-form?file=app%2Fviews%2Fcatalog%2Fcatalog.component.html
If I remove the formGroup in Html, the application works fine 如果我在HTML中删除formGroup,则该应用程序可以正常运行
You declared CatalogViewComponent
in AppRoutingModule
therefore you have to import ReactiveFormsModule
there: 您在AppRoutingModule
声明了CatalogViewComponent
,因此必须在AppRoutingModule
导入ReactiveFormsModule
:
app.routing.module.ts app.routing.module.ts
@NgModule({
declarations: [
LoginViewComponent, HomeViewComponent, CatalogViewComponent
],
imports: [
ReactiveFormsModule, <=============================== add this
RouterModule.forRoot([
{ path: 'login', component: LoginViewComponent },
{ path: 'home', component: HomeViewComponent },
{ path: 'catalog', component: CatalogViewComponent },
{ path: '**', redirectTo: 'login' }
])
],
exports: [
RouterModule
],
providers: [],
})
export class AppRoutingModule {}
Forker Stackblitz Forker Stackblitz
See also 也可以看看
Another way is to create SharedModule: 另一种方法是创建SharedModule:
@NgModule({
...
exports: [
ReactiveFormsModule
]
})
export class SharedModule {}
And import it in any module where you use reactive forms 并将其导入使用反应形式的任何模块中
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.