Angular 模板分析错误：Can'；t绑定到'；formGroup'；因为它不是'；t'的已知属性；表格'；

我有一个角度路由，在其中一个组件中，我有一个简单的登录表单，并在模板中提供formGroup，它显示了上面的错误

步骤：在应用程序模块中导入ReactiveFormsModule

在布线组件中：

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

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

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

名称
用户名
提交

演示URL:

---

如果我删除Html中的formGroup，应用程序工作正常

您在

ApprovingModule

中声明了

CatalogViewComponent

，因此您必须导入

ReactiveFormsModule

：

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

---

并将其导入任何使用反应式表单的模块中

您在

AppRoutingModule

中声明了

CatalogViewComponent

，因此您必须导入

反应式表单模块

：

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

---

并将其导入任何使用反应式表单的模块中

如果我有多个路由模块，是否有办法在一个位置添加并在所有路由组件中使用它。创建

共享模块

并导入它，是否有办法在一个位置添加并在所有路由组件中使用它，如果我有多个路由模块。创建

SharedModule

并导入它