Data from form in modal getting saved even if i dont want to


#1

In my page i have button which shows modal with settings form.

method in Page, which shows modal, and handle data after dismiss

navigateToSettingsPage(){
      console.log(this.settings);
      let settingsModal=this.modalCtrl.create(SettingsPage,{settings:this.settings});
      settingsModal.onDidDismiss((data)=>{
        if(data){
          console.log('setting save');
          if(this.settings.shiftsInNativeCalendar!=data.shiftsInNativeCalendar&&data.shiftsInNativeCalendar==false){
            this.deleteEvents(this.shifts);
          }
          this.settings=data;
          this.settingsService.saveSettingsToDb(this.settings).then(()=>{});
        }
      });
      settingsModal.present();
  }

In modal i have two buttons… one to dismiss modal+save data in page, second to only dismiss modal. Problem is that even if i only dismiss modal, settings object get saved in my page… I really dont know, how it is possible. Any ideas?

Modal HTML

<ion-header>

  <ion-navbar>
    <ion-title>Nastavení</ion-title>
  </ion-navbar>
  <ion-buttons end>
    <button ion-button icon-only color="danger" (click)="dismiss()"><ion-icon name="close"></ion-icon></button>
  </ion-buttons>

</ion-header>


<ion-content padding>
<form [formGroup]="settingsForm">
    <ion-list>
      <ion-item>
        <ion-label>Url</ion-label>
        <ion-input type="text" placeholder="Url" [(ngModel)]="settings.url" formControlName="url"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>ID zaměstnance</ion-label>
        <ion-input type="text" placeholder="Evidenční číslo" [(ngModel)]="settings.userId" formControlName="userId"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>Heslo</ion-label>
        <ion-input type="password" placeholder="Heslo" [(ngModel)]="settings.password" formControlName="password"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>Zanášení směn do nativního kalendáře</ion-label>
        <ion-toggle formControlName="shiftsInNativeCalendar" [(ngModel)]="settings.shiftsInNativeCalendar"></ion-toggle>
      </ion-item>
      <ion-item>
        <button ion-button block (click)="submitSettings()">Uložit</button>
      </ion-item>
    </ion-list>
  </form>
  <div text-center>
    <button ion-button icon-only large (click)="readQR()"><ion-icon name="barcode"></ion-icon></button>
  </div>
</ion-content>

Modal ts

@Component({
  selector: 'page-settings',
  templateUrl: 'settings.html',
})
export class SettingsPage {
  settingsForm:FormGroup;
  shiftsInNativeCalendar:boolean;
/*   calendars; */
  nativeCalendarId;
  settings:Settings;
/*   calendars; */

  constructor(private barcodeScanner:BarcodeScanner,private alertCtrl:AlertController, public navParams: NavParams,private fb:FormBuilder, private viewCtrl:ViewController, private calendar:Calendar) {
      this.settings=this.navParams.get('settings');
      this.settingsForm=this.fb.group({
        'url':['',Validators.required],
        'userId':['',Validators.required],
        'password':['',Validators.required],
        'shiftsInNativeCalendar':['',Validators.required],
        'nativeCalendarId':['',]
      });
/*       this.calendar.listCalendars().then(calendars=>{
        this.calendars=calendar;
      }); */
  }

  submitSettings(){
    this.viewCtrl.dismiss(this.settings);
  }

  dismiss(){
    this.viewCtrl.dismiss(this.settings);
  }




  readQR(){
    this.barcodeScanner.scan().then((qrData:any)=>{
      let jsonData=JSON.parse(qrData.text);
      if(jsonData.url&&jsonData.id&&jsonData.pass){
        this.settings.url=jsonData.url,
        this.settings.userId=jsonData.id,
        this.settings.password=jsonData.pass
      }
      else{
        let alert = this.alertCtrl.create({
          title: 'Nebyl načten QR kód v odpovídajícím formátu',
          buttons: ['OK']
        });
        alert.present();
      }

    });
  }

}

#2

Use something like Object.assign or lodash’s clone functions in order to create a separate object to pass to the modal.


#3

thx i used Object.assign and it works :slight_smile: