模板解析错误：无法绑定到“formGroup”，因为它不是“form”的已知属性

Question

我有一个角度路由，在其中一个组件中我有简单的登录表单并在模板中提供 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>

演示网址：

https://stackblitz.com/edit/angular-router-basic-form?file=app%2Fviews%2Fcatalog%2Fcatalog.component.html

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

Answer 1

您在AppRoutingModule 中声明了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 {}

Forker Stackblitz

另见

• Angular 2 Use component from another module

另一种方式是创建SharedModule：

@NgModule({
  ...
  exports: [
    ReactiveFormsModule
  ]
})
export class SharedModule {}

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