Angular 4 错误：formGroup 需要一个 FormGroup 实例答案

【问题标题】：Angular 4 Error: formGroup expects a FormGroup instanceAngular 4 错误：formGroup 需要一个 FormGroup 实例
【发布时间】：2017-11-25 16:20:34
【问题描述】：

我收到屏幕截图中提供的以下错误。我正在 Angular 4 中创建一个登录表单。

这是有错误的当前代码。

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(""),
  })

  }


}

任何帮助/指出我正确的方向都会很棒！谢谢！

【问题讨论】：

请考虑在问题正文中更详细地转录错误，而不是让回答者打开您的屏幕截图。

标签： angular typescript

【解决方案1】：

您的ngOnInIt 中有错字。应该是ngOnInit。由于拼写错误，该方法在组件初始化时没有运行，因此 myGroup 未定义。

为避免此类错误，您应该始终让您的组件从 angular 实现相应的接口。这个例子正是他们在那里的原因:)

在你的例子中是：

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

export class AppComponent implements OnInit { ... }

这样你会得到一个编译时错误，告诉你AppComponent没有实现OnInit，如果你拼错或忘记了它。

【讨论】：