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


Ask A Question





Login To post a question

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>
</ion-item>

This successfully brings up the modal into view

@Component({
  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
  };

 close(){
    this.viewCtrl.dismiss();
  };
}

When I hit the back button

    <ion-header>


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

</ion-header>


<ion-content padding>

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

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

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

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

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.

@Component({


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 = formBuilder.group({
                    "1": [""],
                    "2": [""],
                    "3": [""],
                    "4": [""],
                    "5": [""],
                    "6": [""],
                    "7": [""],
                    "8": [""]

                  });

                  this.loadQuestions();
                  this.navCtrl = navCtrl;


   }
      loadQuestions(){
    this.jsondata.load()
    .then(data => {
      this.questions = (data);
    })
  };

  submit(){
    this.submitAttempt = true;
      console.log("Success!"); 
    var data = this.leadsForm.value;

    this.jsonMaker(data);

  };

  jsonMaker(data){
    console.log(JSON.stringify(data)), error => {
      console.log("oooops!");
    }
  };
gotoAddKidsModal() {
let modal = Modal.create(AddKidsModal);
this.navCtrl.present(modal);



};

I get this error when it is added.

TypeError: Cannot read property 'group' of undefined

The group refers to the FormBuilder.group 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?

Thanks!

For more info please click herehttps://stackoverflow.com/q/38852810



Have a question or need a custom quote?
info@smartinfocare.com