How do I in ionic 2 pass data from a modal with a form on, to the home page?

Question

Hi there can anyone help out. I am new to Ionic and Angular. I am trying to create a weather app in Ionic 2. I have created a Home page with a Click event calling an AddWeather() function. The function opens up a modal with a form attached. I am trying to pass data from the form on the modal back to the home page an output on the screen. I have tried ngModel but can't seem to get it working correctly.

Here is my Code: (home.ts)

import { Component } from '@angular/core';
import { NavController, ModalController, NavParams } from 'ionic-angular';
import { AddPage } from '../add/add';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  public weatherList = [];
  constructor(public navCtrl: NavController, public modalCtrl: ModalController) {

}

addWeather() {
    let addWeatherModal = this.modalCtrl.create(AddPage);


    addWeatherModal.present();
  }
}

(add.html)

<ion-header>
  <ion-navbar color="weatherbru">
    <ion-title>Modal</ion-title>
    <ion-buttons end>
        <button ion-button icon-only (click)="CloseModal()"><ion-icon name="close"></ion-icon></button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content padding>
    <form>
        <ion-item>
            <ion-label stacked>City</ion-label>
            <ion-input type="text" ></ion-input>
        </ion-item>
        <ion-item>
            <ion-label stacked>Country</ion-label>
            <ion-select >
                <ion-option value="us">United States</ion-option>
                <ion-option value="uk">United Kingdom</ion-option>
            </ion-select>
        </ion-item>
        <button ion-button block (click)="CloseModal()">Add Weather</button>
    </form>
<div padding>
</div>
</ion-content>

(add.ts)

import { Component } from '@angular/core';
import { ModalController } from 'ionic-angular';
import { NavController, NavParams, ViewController } from 'ionic-angular';

@Component({
  selector: 'page-add',
  templateUrl: 'add.html'
})
export class AddPage {

  constructor(public viewCtrl: ViewController, public navCtrl: NavController, public navParams: NavParams) {}


CloseModal() {

  this.viewCtrl.dismiss();
 }

}

Check this [link](http://stackoverflow.com/questions/41521251/ionic-2-get-data-back-from-modal/41521437#comment70250530_41521437) — amin arghavani, Jan 17 '17 at 16:26
Hey there thanks for that. I understand that I need to send data as I dismiss the model. It is getting the form on add.html to pass the data through that I am having an issue with. — Tian Reagon, Jan 17 '17 at 16:53

score 7 · Accepted Answer · answered Jan 18 '17 at 06:23

In your html :

<form>
        <ion-item>
            <ion-label stacked>City</ion-label>
            <ion-input [(ngModel)]="form.city" type="text" ></ion-input>
        </ion-item>
        <ion-item>
            <ion-label stacked>Country</ion-label>
            <ion-select [(ngModel)]="form.country">
                <ion-option value="us">United States</ion-option>
                <ion-option value="uk">United Kingdom</ion-option>
            </ion-select>
        </ion-item>
        <button ion-button block (click)="CloseModal()">Add Weather</button>
    </form>

In your add.ts file :

export class AddPage {
    form : any; //Declare the form object to be bound to your html
  constructor(public viewCtrl: ViewController, public navCtrl: NavController, public navParams: NavParams) {}

CloseModal() {

  this.viewCtrl.dismiss(this.form); //Send back the form object when closeModal is called
 }
}

In your home.ts :

addWeather() {
    let addWeatherModal = this.modalCtrl.create(AddPage);

    addWeatherModal.present();
    addWeatherModal.onDidDismiss(data=>{ //This is a listener which wil get the data passed from modal when the modal's view controller is dismissed
        console.log("Data =>", data) //This will log the form entered by user in add modal.
    })
  }

Hi there thanks for that. This is actually what I initially tried but I get a runtime error of. Error in ./AddPage class AddPage - caused by cannot read property ''city' of undefined — Tian Reagon, Jan 18 '17 at 11:49
Then in the constructor, initialise form variable like : this.form = {city : "", country : ""}; That will solve it — Bala Abhinav, Jan 18 '17 at 11:51
Hi there I figured it out. I had to add a name field when calling ngModel --> also I passed a default value on the form like this ---> public form = { country: 'us' }; — Tian Reagon, Jan 18 '17 at 15:12

How do I in ionic 2 pass data from a modal with a form on, to the home page?

1 Answers1