FormGroup expects an instance of FormGroup. Please transfer

Question

SITUATION:

I am trying to create a very simple login form to my Ionic 2 application.

No matter what I try, I keep getting this error:

formGroup expects a FormGroup instance. Please pass one in. 

THE CODE:

Page Component:

 import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import { FormGroup, Validators, FormBuilder } from '@angular/forms'; @Component({ selector: 'login-page', templateUrl: 'login-page.html' }) export class LoginPage { loginForm: FormGroup; constructor(public navCtrl: NavController, private formBuilder: FormBuilder) {} ionViewDidLoad() { console.log('Login page loaded'); this.loginForm = this.formBuilder.group({ email: ['', Validators.required], password: ['', Validators.required], }); } submitLogin() { console.log('Doing login..'); } } 

View:

 <ion-header> <ion-navbar> <ion-title>LoginPage</ion-title> </ion-navbar> </ion-header> <ion-content padding> <form [formGroup]="loginForm" (ngSubmit)="submitLogin()"> <ion-item> <ion-label>Email</ion-label> <ion-input #email type="email" formControlName="email"></ion-input> </ion-item> <ion-item> <ion-label>Password</ion-label> <ion-input #password type="text" formControlName="password"></ion-input> </ion-item> <button ion-button block type="submit">Submit</button> </form> </ion-content> 

QUESTION:

Why am I getting an error message?

Do you know what is wrong with this code?

Thanks!

Answer 1

Add the code in ionViewDidLoad to the constructor. It probably doesn't assign a form in time, causing the view to use undefined