Reputation: 2197
I get the folowing error provided in screenshot. I am creating a LOGIN form in Angular 4.
Here is the current code with the error.
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(""),
})
}
}
Any help/pointing me in the right direction would be great! Thanks!
Upvotes: 0
Views: 2449
Reputation: 3922
There's a typo in your ngOnInIt
. It should be ngOnInit
. Because of the typo, the method is not run when the component initializes and thus myGroup
is undefined.
To avoid this kind of error you should always have your component implement the corresponding interfaces from angular. This example is exactly why they're there :)
In your example it would be:
import { Component, OnInit } from '@angular/core';
export class AppComponent implements OnInit { ... }
This way you will get a compile-time error telling you that AppComponent
is not implementing OnInit
if you've misspelled or forgotten it.
Upvotes: 4