Modal component changes list behavior

Ionic Framework Ionic Angular
1

Hi guys,

first post here! I’m about ready to tear my hair out with a problem and am hoping someone can help me out a little :slight_smile:
I’m working on a page in which I want to basically add items to a list.
The list consists of key-value pairs, where the key is selected from an ion-select element, and the value comes from an ion-input.
A fab-button allows new items to be added to the list.

This all works fine when the list is in a page, but as soon as I move it to a modal, the behaviour changes completely. The text from the previously selected key and value stays in the “new pair” area and a blank entry is added to the list :confused:

Here’s what I’m working with:

test.page.ts

import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { TestComponent } from 'src/app/components/test/test.component';

interface KeyPair {
  key: string;
  value: string;
}

@Component({
  selector: 'app-test',
  templateUrl: './test.page.html',
  styleUrls: ['./test.page.scss'],
})
export class TestPage implements OnInit {

  constructor(private modalController: ModalController) { }

  ngOnInit() {
  }

  async openModal() {
    const editArticleModal = await this.modalController.create({
      component: TestComponent,
      componentProps: {
      },
      cssClass: 'auto-height'
    });
    await editArticleModal.present();
  }

  public pairs: KeyPair[] = [];
  keys: string[] = [
    'basket'
    , 'safety'
    , 'construction'
    , 'development'
    , 'cancer'
  ]
  public kp: any = {};
  addData() {
    const newVar: KeyPair = { key: this.kp.key, value: this.kp.value }
    this.pairs.push(newVar);
    this.kp = {};
  }

  remove(i) {
    this.pairs.splice(i, 1);
  }

}

test.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>Home</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-button (click)="openModal()">
    Open Modal
  </ion-button>
  <ion-card>
    <ion-card-content>
      <ion-fab vertical="top" horizontal="end" slot="fixed">
        <ion-fab-button (click)="addData()">
          <ion-icon name="add"></ion-icon>
        </ion-fab-button>
      </ion-fab>
      <ion-item>
        <ion-select placeholder="Select key" [(ngModel)]="kp.key">
          <ion-select-option *ngFor="let k of keys">{{k}}</ion-select-option>
        </ion-select>
        <ion-input [(ngModel)]="kp.value"></ion-input>
      </ion-item>
      <ion-list>
        <ion-item-sliding *ngFor="let p of pairs; let i = index;">
          <ion-item>
            <ion-label>{{p.key}}</ion-label>
            <ion-label>{{p.value}}</ion-label>
            <ion-button slot="end" (click)="remove(i)">
              <ion-icon name="trash"></ion-icon>
            </ion-button>
          </ion-item>
        </ion-item-sliding>
      </ion-list>
    </ion-card-content>
  </ion-card>
</ion-content>

As I said, the list works fine in the page. But it gets a little weird when the same code is moved to a modal:

test.component.ts

import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';

interface KeyPair {
  key: string;
  value: string;
}

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss'],
})
export class TestComponent implements OnInit {

  constructor(private modalController: ModalController) { }

  ngOnInit() { }

  public pairs: KeyPair[] = [];
  keys: string[] = [
    'basket'
    , 'safety'
    , 'construction'
    , 'development'
    , 'cancer'
  ]
  public kp: any = {};
  addData() {
    const newVar: KeyPair = { key: this.kp.key, value: this.kp.value }
    this.pairs.push(newVar);
    this.kp = {};
  }

  remove(i) {
    this.pairs.splice(i, 1);
  }


}

test.component.html

<ion-card>
  <ion-card-content>
    <ion-fab vertical="top" horizontal="end" slot="fixed">
      <ion-fab-button (click)="addData()">
        <ion-icon name="add"></ion-icon>
      </ion-fab-button>
    </ion-fab>
    <ion-item>
      <ion-select placeholder="Select key" [(ngModel)]="kp.key">
        <ion-select-option *ngFor="let k of keys">{{k}}</ion-select-option>
      </ion-select>
      <ion-input [(ngModel)]="kp.value"></ion-input>
    </ion-item>
    <ion-list>
      <ion-item-sliding *ngFor="let p of pairs; let i = index;">
        <ion-item>
          <ion-label>{{p.key}}</ion-label>
          <ion-label>{{p.value}}</ion-label>
          <ion-button slot="end" (click)="remove(i)">
            <ion-icon name="trash"></ion-icon>
          </ion-button>
        </ion-item>
      </ion-item-sliding>
    </ion-list>
  </ion-card-content>
  <ion-card>

Has anyone seen this before, or know how I could get the modal list to behave the same as the page list?

Thanks in advance!!

Michael

2

Ok, looks like I found the problem… The test component had no FormsModule Import. Added that and all is good.