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

Question

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

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

另见

另一种方法是创建 SharedModule：

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

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

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

Template parse errors: Can't bind to 'formGroup' since it isn't a known property of 'form'

angular2-forms

angular

angular-reactive-forms

angular4-forms

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

Template parse errors: Can't bind to 'formGroup' since it isn't a known property of 'form'

angular2-forms

angular

angular-reactive-forms

angular4-forms

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