CODEWITHSUNDEEP
angularjsionic-framework
raj
raj

Reputation: 6094

Ionic life-cycle not firing

I have an Ionic 2 app which was working perfectly fine. I updated the ionic app from rc-0 to rc-2. From then onwards I am facing an issue with ionic life-cycle event ionViewDidLoad. I have a signup form.

import {Validators, FormBuilder, FormGroup , AbstractControl } from '@angular/forms';
export class Signup {
  form: FormGroup;
  constructor(  formBuilder: FormBuilder) {  }
  ionViewDidLoad() {
    this.form = this.formBuilder.group({
      name: ['', Validators.required],
      email: ['', CustomValidator.emailValidator],
      password: ['', Validators.compose([Validators.minLength(8),Validators.required])],
      password_confirmation: ['', Validators.compose([Validators.minLength(8),Validators.required])]
  } }
}

And in my html page I have,

  <form [formGroup]="form" (ngSubmit)="signup()">

But when the page loads , I get an exception in my web-console

EXCEPTION: Error in ./Signup class Signup - inline template:9:8 caused by: formGroup expects a FormGroup instance. Please pass one in.

I believe the form variable is not defined before the html is loaded. I tried ngOnInit and it works fine. ionViewDidLoad was working before I updated Ionic and most examples online mentions the above method only. What happened now, what changed ?

Upvotes: 3

Views: 633

Answers (2)

raj
raj

Reputation: 6094

There has been a breaking change in RC2 . As per new change ,

ionViewDidLoad, means that everything has been already loaded! including children. So if you template uses items and it undefined.

We can use the new ionViewWillLoad 

ionViewWillLoad() {
    this.form = this.formBuilder.group();
}

Upvotes: 1

JoeriShoeby
JoeriShoeby

Reputation: 1374

The error is telling you exactly what's going wrong. While compiling/rendering your view, Angular requires a formGroup instance to already exists. While ionViewDidLoad get's called after compiling/rendering your view, the ionViewDidLoad would not be called, because an error appeared within your template. To make things clear :

Define your form in constructor or ngOnInit, else your template wouldn't have access to the formGroup instance, since it haven't been created yet.

Upvotes: 0

Related Questions