Form inside modal returning undefined


I am trying to create a simple form inside a modal that takes the information the user entered and displays it in the previous page. I have called the form: addform and the home page: mhome.

My form calls the closeModal() function:

export class Addform {
  private addform : FormGroup;

  constructor(private formBuilder: FormBuilder, public storage: Storage,public navCtrl: NavController, public viewCtrl: ViewController) {
    this.addform ={
      name: ['', Validators.required],
      occupation: [''],
      dob: [''],
      relationship: [''],
        color: [''],
      adjectives: [''],


  //  this.navCtrl.push(MhomePage,this.addform);
  // console.log();
  // let data = this.addform;
 **let data = this.addform;** //This is the part I'm confused on. How do I set the formbuilder group variables to the data variable?


The openModal() function

  openModal() {

     let modal = this.modalCtrl.create(Addform);
     modal.onDidDismiss((data) => {
        console.log("Data =>", data);


Hitting the + button pops open the form page. The console shows that the data is undefined.

Any help would be appreciated!


Demonstrated here.


Thanks for that. How would I access each individual component in the form builder group though?
In the example that they show, they have the user id already set.

let profileModal = this.modalCtrl.create(Profile, { userId: 8675309 });

//So they can then pass it along and do things with the user id

 let modal = this.modalCtrl.create(Addform, I know this part is wrong) );

how would I access the value the user entered in the formbuilder group to pass it to the modal?

Sorry if this seems obvious!