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

Question

我在屏幕截图中提供了以下错误。我正在Angular 4中创建一个LOGIN表单。

以下是带有错误的当前代码。

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

  }


}

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

Answer 1

你的ngOnInIt中有一个拼写错误。它应该是ngOnInit。由于拼写错误，当组件初始化时，该方法不会运行，因此myGroup未定义。

为了避免这种错误，你应该始终让你的组件从angular实现相应的接口。这个例子正是他们在那里的原因：）

在你的例子中，它将是：

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

export class AppComponent implements OnInit { ... }

这样您就会收到编译时错误，告诉您AppComponent如果您拼错或遗忘了OnInit，则表示{{1}}未实施。{/ p >