잡히지 않은 오류 : 템플릿 구문 분석 오류 : 'form'의 알려진 속성이 아니기 때문에 '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 f를이어야한다 ormGroup : FormGroupDirective의 모습

<form [formGroup]="form" 

때문에 :

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