Angular 4錯誤：formGroup需要一個FormGroup實例

我收到了截圖中提供的下面的錯誤。我在角4Angular 4錯誤：formGroup需要一個FormGroup實例

創建登錄表單下面是當前的代碼有錯誤。

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
    import { NgModule } from '@angular/core'; 
    import { ReactiveFormsModule } from '@angular/forms'; 

    import { AppComponent } from './app.component'; 
    import { ProductComponent } from './product/product.component'; 
    import { MembersComponent } from './members/members.component'; 
    import { SortPipe } from './app.sortpipe'; 

    @NgModule({ 
     declarations: [ 
     SortPipe, 
     AppComponent, 
     ProductComponent, 
     MembersComponent 
     ], 
     imports: [ 
     BrowserModule, 
     ReactiveFormsModule 
    ], 
     providers: [], 
     bootstrap: [AppComponent] 
    }) 
    export class AppModule { }

HTML

<form class="container" [formGroup]="myGroup" (ngSubmit)="onSubmit(myGroup.value)"> 
<input type="text" name="firstName" placeholder="firstName" formControlName="firstName"/> 
<br/><br/> 
<input type="text" name="lastName" placeholder="lastName" formControlName="lastName"/> 
<br/><br/> 
<select name="gender" formControlName="gender"> 
<option value="female">female</option> 
<option value="male">male</option> 
</select> 
<br/><br/> 
<input type="submit" value="submit"> 
</form> 
<br/><br/><br/>

app.component.ts

import { Component } from '@angular/core'; 
import { FormGroup, FormControl } from '@angular/forms'; 

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

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


    myGroup ; 

    ngOnInIt(){ 
    this.myGroup = new FormGroup({ 

    firstName : new FormControl("umair"), 
lastName : new FormControl(""), 
    gender : new FormControl(""), 
    }) 

    } 


}

任何幫助/指着我在正確的方向將是偉大的！謝謝！

來源

2017-06-22 SVK

請考慮在問題主體中更詳細地記錄錯誤，而不是留給回答者來打開截圖。 – Forty3

您的ngOnInIt中有一個錯字。它應該是ngOnInit。由於拼寫錯誤，該方法在組件初始化時未運行，因此未定義myGroup。

爲了避免這種錯誤，您應該始終讓組件實現角度對應的接口。這個例子就是爲什麼他們在那裏:)

在您的例子那就是：

import { Component, OnInit } from '@angular/core'; 

export class AppComponent implements OnInit { ... }

這樣你會得到一個編譯時錯誤告訴你，AppComponent不執行OnInit如果你拼錯或忘記了它。

來源

2017-06-22 11:48:50 altschuler

Angular 4錯誤：formGroup需要一個FormGroup實例

回答

相關問題