Passing independent data to modal ng Model

@isaiasegg wrote:

Hi everyone!

I’m having an issue with my ngModels inside a Ionic 4 modal.

Basically im trying to set the ngModel scope inside a modal to be equal to the value i’m passing through the “componentProps” property of the modal. And the value im passing comes from a function in a ngFor item.

The problem is that the value or item from the ngFor that im passing in the function, keeps been binded to the array, so when i edit the ngModel inside an input in the modal, and i dismiss the modal, the item changes also in the ngFor. It should be independent so i can change it if i want.

<ion-card *ngFor="let student of students | filters:{ text: searchText }" (click)="studentAction(student)" >
    <ion-card-header> 
      <ion-card-title>{{student.name}}</ion-card-title>
    </ion-card-header>

    <ion-card-content>
      <p><b>Padre:</b> <br> {{student.father}}</p> 
    </ion-card-content>
  </ion-card>

async studentAction(student) {

    const modal = await this.modalController.create({
      component: StudentActionPage,
      componentProps: student ? { student } : undefined
    });

    modal.onDidDismiss().then((data) => {
      console.log(data)
    })
    return await modal.present()
}

const studentModel : any = this.navParams.get('student');
this.studentModel = studentModel;

<ion-list>
    <ion-item>
      <ion-label position="floating">Nombre completo</ion-label>
      <ion-input type="text" name="name" [(ngModel)]="studentModel.name"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="floating">Nombre del padre</ion-label>
      <ion-input type="text" name="father" [(ngModel)]="studentModel.father"></ion-input>
    </ion-item>
</ion-list>

Any idea what is happening?
Regards.

Posts: 1

Participants: 1

Read full topic