未捕獲的錯誤：模板解析錯誤：無法綁定到“ FormGroup”，因為它不是“ form”的已知屬性

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>

但是我收到以下錯誤

未捕獲的錯誤：模板解析錯誤：無法綁定到“ FormGroup”，因為它不是“ form”的已知屬性。 （“->] [FormGroup] =” form“（ngSubmit）=” onSubmit（form.value）“>），位於JitCompiler.webpackJsonp ... / .. / .. / compiler/@angular/compiler.es5。 js.JitCompiler._compileComponents（compiler.es5.js：26882）（編譯器.es5.js：26769）Object.then（compiler.es5.js：1679）在JitCompiler.webpackJsonp ... / .. / .. /@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents（compiler.es5.js：26768）位於JitCompiler.webpackJsonp ... / .. / .. / compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync （compiler.es5.js：26697）

Answer 1

您輸入的內容似乎錯誤。

它應該是f ormGroup而不是F ormGroup：

<form [formGroup]="form"

因為FormGroupDirective看起來像：

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