Angular Ionic - Adding new object to the array from reactive form inside <ion-modal>

Ionic Framework
1

I have an <ion-modal> that contains reactive form on it. The problem is after having filled all the required fields and using push() to add it into the existing array, nothing happens. Here are the snippets:

showcase.page.ts

  openAddItemModal() {
    this.modalController.create({
      component: AddItemPage,
      cssClass: 'itemModal',
      componentProps: {selectedItem: this.showcases}
    })
    .then(modalEl=>{
      modalEl.present();
      return modalEl.dismiss();
    });
  }

showcase.service.ts

private _items: Item[] = [
    new Item('s1', 'Seaside house', 'lorem ipsum', new Date('2019-01-01')),
    new Item('s2', 'Terrace house', 'lorem ipsum', new Date('2019-01-01'))
]

addItem(title: string, description: string, dateAdded: Date) {
  const newItem = new Item(Math.random().toString(), title, description, dateAdded);

    /* Using normal array */
    this._items.push(newItem);
    }

add-item.page.ts

  onAddItem(){
    if(!this.form.valid) {
      return;
    }
    this.showcaseService.addItem(this.form.value.title, this.form.value.description, new Date(this.form.value.dateAdded));
    this.form.reset();
    this.router.navigate(['/showcase/'])
  }

This is reactive form inside the

add-item.page.html

<ion-content>
<form [formGroup]="form">
  <ion-grid>
    <ion-row>
      <ion-col size-sm="6" offset-sm="3">
        <ion-item>
          <ion-label position="floating">Title</ion-label>
          <ion-input type="text" formControlName="title"></ion-input>
        </ion-item>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col size-sm="6" offset-sm="3">
        <ion-item>
          <ion-label position="floating">Description</ion-label>
          <ion-input type="text" formControlName="description"></ion-input>
        </ion-item>
      </ion-col>
    </ion-row>
    <ion-row *ngIf="!form.get('description').valid && form.get('description').touched">
      <ion-col size-sm="6" offset-sm="3">
        <p>Description must be between 1 and 200 characters</p>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col size-sm="6" offset-sm="3">
        <ion-item>
          <ion-label position="floating">Date added</ion-label>
          <ion-datetime
            display-format="MMM DD YYYY" formControlName="dateAdded"></ion-datetime>
        </ion-item>
      </ion-col>
    </ion-row>
    <ion-row size-sm="6" offset-sm="3">
      <ion-button type="submit" color="primary" expand="block" (click)="onAddItem()" [disabled]="!form.valid">Add item</ion-button>
    </ion-row>
  </ion-grid>
2

Can you throw this together into a small demo? It’s kind of hard to follow, so just need something to see what the issue is.

3

https://dl.dropboxusercontent.com/s/ax9fzskyn0ircpv/ion-modal-2.gif?dl=0(image larger than 4096KB)

This is the example. After filling out the form, nothing happened or added. Even no error log in the browser console.
I think I am still missing the idea on how to pass the submitted form from inside the modal into another page.

4

Any suggestion to this?

5

Hey, I can’t really guess the issue from just that video/gif. I need an app that i can run and inspect.