Closing a modal reults in error “TypeError: Cannot read property 'dismiss' of undefined”

After a few hours of banging my head against my desk, Im ready for an education. Im a newbie to Ionic2/Angular2, so forgive me if my code is not perfectly refactored.

I have a form which has an item. This item is one of many on my form that will correspond to data stored in a JSON object. I have the form successfully loading the JSON data with out the modal, but when I add the modal, it breaks.

<ion-item *ngSwitchCase="'group'" >
    <button item-right (click)="gotoAddKidsModal()"><ion-icon name="add"></ion-icon></button>
    <ion-label primary>{{q.variableName}}</ion-label>
This successfully brings up the modal into view

  templateUrl: 'build/pages/add-kids/add-kids.html'

export class AddKidsModal {
  static get parameters(){
        return [[NavController],[ViewController],[NavParams]];

  constructor(private nav: NavController, 
              private navParams: NavParams, 
              private formBuilder: FormBuilder,
              public viewCtrl: ViewController, 
              public modal: Modal) {

      this.viewCtrl = viewCtrl


When I hit the back button


        <ion-title>Add Kids</ion-title>


<ion-content padding>

      <ion-header-bar>This is the add kids page</ion-header-bar>

    <ion-label primary>This is a label</ion-label>
    <ion-input type="text" > </ion-input>

      <ion-label primary>This is a label</ion-label>
      <ion-input type="text"> </ion-input>

  <button light (click)="close()">
    <ion-icon name='arrow-back'></ion-icon>

I get the error TypeError: Cannot read property 'dismiss' of undefined.

Now i believe the problem lies in the fact that I do not have

static get parameters() {
    return [[NavController]];

in my ‘main’ page or in other words the page the modal comes out of. When I do add it, the app breaks.


templateUrl: 'build/pages/leads/leads.html',
  providers: [JsonData, AddKidsModal],
  directives: [CORE_DIRECTIVES]

export class LeadsPage {  
  //This breaks the app!
static get parameters() {
            return [[NavController]];

  leadsForm: ControlGroup;
//Any Idea ho to get this to be more concise?
  "1": AbstractControl;
  "2": AbstractControl;
  "3": AbstractControl;
  "4": AbstractControl;
  "5": AbstractControl;
  "6": AbstractControl;
  "7": AbstractControl;
  "8": AbstractControl;

  submitAttempt: Boolean = false;
  public questions: AbstractControl;

  constructor(private navCtrl: NavController, 
              private navParams: NavParams,
              private formBuilder: FormBuilder, 
              private http: Http, 
              public jsondata: JsonData, 
              public addKidsModal: AddKidsModal
              ) {
                  this.leadsForm ={
                    "1": [""],
                    "2": [""],
                    "3": [""],
                    "4": [""],
                    "5": [""],
                    "6": [""],
                    "7": [""],
                    "8": [""]


                  this.navCtrl = navCtrl;

    .then(data => {
      this.questions = (data);

    this.submitAttempt = true;
    var data = this.leadsForm.value;



    console.log(JSON.stringify(data)), error => {
gotoAddKidsModal() {
let modal = Modal.create(AddKidsModal);


I get this error when it is added.

TypeError: Cannot read property 'group' of undefined

The group refers to the method. But how do I circumvent that, since that is what is generating my FormControls?

I did not include any import statements for simplicity sake, if you would like them I can add them in.

How do I pass the params from the ‘main’ page form to the modal, so that way I can go back?


Cordova CLI: 6.3.0 Ionic Framework Version: 2.0.0-beta.10 Ionic CLI Version: 2.0.0-beta.36 Ionic App Lib Version: 2.0.0-beta.19 ios-deploy version: Not installed ios-sim version: Not installed OS: Mac OS X El Capitan Node Version: v4.4.7 Xcode version: Not installed