未捕获错误:模板解析错误:无法绑定到' FormGroup'因为它不是“形式”的已知属性。

时间:2017-09-20 13:59:38

标签: angular angular-forms

我正在尝试在let events = require('events'); var loader = new events.EventEmitter(); watchdog(cmddir, (dir) => { loader.emit("loadcommand", dir) loader.on('loadcommand', (file) => { require(file); }); 中进行表单绑定。以下是我的代码 app.component.ts

angular 4

app.module.ts

import { Component, Input, OnChanges, SimpleChange, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  form: FormGroup;
  ngOnInit() {
      this.form = new FormGroup({
        firstname: new FormControl('First Name'),
        lastname: new FormControl(''),
        languages: new FormControl('')
      });
    }

  onSubmit = function(user) {
    console.log(user);
  };
}  

app.component.html

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { ProductComponent } from './product/product.component';
import { MemberComponent } from './member/member.component';
import { ItemListComponent } from './item-list/item-list.component';
import { SortPipe } from './app.sort';

@NgModule({
  declarations: [
    SortPipe,
    AppComponent,
    ProductComponent,
    MemberComponent,
    ItemListComponent
  ],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
  ],
  providers: [],
  exports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ],
  bootstrap: [AppComponent],
})
export class AppModule { }

但是我收到以下错误

  

未捕获错误:模板解析错误:   无法绑定到' FormGroup'因为它不是“形式”的已知属性。 ("            - >   ] [FormGroup] ="形式" (ngSubmit)="的onSubmit(form.value)">       )       在JitCompiler.webpackJsonp ... / .. / ../ compiler /@angular/compiler.es5.js.JitCompiler._compileComponents(compiler.es5.js:26882)       在compiler.es5.js:26769       at Object.then(compiler.es5.js:1679)       在JitCompiler.webpackJsonp ... / .. / ../ compiler /@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents(compiler.es5.js:26768)       at JitCompiler.webpackJsonp ... / .. / .. / compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync(compiler.es5.js:26697)

1 个答案:

答案 0 :(得分:3)

好像你输错了。

应该是 f ormGroup而不是 F ormGroup:

<form [formGroup]="form"

因为FormGroupDirective看起来像:

@Directive({
  selector: '[formGroup]', 
  ...
})
export class FormGroupDirective extends ControlContainer implements Form,