キャッチコピーエラー：テンプレート解析エラー：「フォーム」の既知のプロパティではないため、「FormGroup」にバインドできません。

Question

angular 4でフォームバインドを実行しようとしています。以下は私のコードです。
app.component.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.module.ts

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

app.component.html

<form [FormGroup]="form" (ngSubmit)="onSubmit(form.value)"> 
    <input type="text" placeholder="firstname" name="firstname" formControlName="firstname" /> 
    <br> 
    <input type="text" placeholder="lastname" name="lastname" formControlName="lastname" /> 
    <br> 
    <select name="languages" formControlName="languages"> 
     <option value="C++">C++</option> 
     <option value="Java">Java</option> 
     <option value="Angular">Angular</option> 
    </select> 
    <br><br> 
    <input type="submit" value="submit" /> 
</form> 

しかし、私は次のように取得していますエラー

Uncaught Error: Template parse errors: Can't bind to 'FormGroup' since it isn't a known property of 'form'. (" --> ][FormGroup]="form" (ngSubmit)="onSubmit(form.value)"> ) at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (compiler.es5.js:26882) at compiler.es5.js:26769 at Object.then (compiler.es5.js:1679) at 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)

Answer 1

誤って入力されたようです。

それは、代わりF ormGroupのormGroup fを次のようになります。

<form [formGroup]="form" 

FormGroupDirectiveが見えるので：

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