How to discard changes and reload object when go back nav?

I navigate from a view detail to a edit detail screen by a push command.
When I go back by the nav button, i want to get an alert with a question that when the user go back, he loses the changes. That works at the moment.
But when I choose OK and go back to lose my changes, I will get the newest data of the object from the database but that takes more time and he goes back before my request is done.

Can anyone give me info how to solve this?

Can I do a synchronous call that he goes back when the getAnimal http request is ready?

I didn’t find a topic that can help me.
This helped me a little bit http://stackoverflow.com/questions/37955114/alert-before-leaving-page-navigate-back-with-ionic-v2

If my question is not clear or the context, feel free to ask more details.

Thanks in advance!

ionViewCanLeave(): Promise<void>{
        console.log("ionViewCanLeave");
        return new Promise((resolve, reject) => {
            let confirm = this.alertCtrl.create({
                title: 'Are you sure?',
                message: 'If you go back, you lose the changes',
                buttons: [{
                    text: 'OK',
                    handler: () => {
                        let loader = this.loadingCtrl.create();
                        loader.present();
                        this.animalService.getAnimal(this.animal).subscribe(
                            data => {
                                this.animal = data;
                            },
                            err => {
                                console.log(err);
                            },
                            () => {
                                loader.dismiss();
                                resolve(); 
                            }
                        );                                             
                    },
                }, {
                    text: 'Cancel',
                    handler: () => {
                        reject();
                    }
                }],
            });
            confirm.present();
        })
    }

Presumably you have the pre-edit animal (in the state to which you wish to revert) before entering the edit screen. Why not reuse that?

Hi rapropos,

Indeed I will the cancel the changes and use the previous state.
For example, in the view screen I have a variable animal from the type AnimalModel with properties ID, name, breed,… and the name of the animal is Goofy.
I click on the edit button and go to the edit screen (another page) with param animal.
Then I change the name to Goofy2.
When I click on the back arrow in the navigation bar they go back to the view screen but the name is still Goofy2 (that is angular), but we can do something in the ionViewCanLeave method I think or maybe is there another way to change the animal object to it previous state?

I am assuming you have your form bound with ngModel to the different fields? I would suggest not binding your model on the form. Instead use FormBuilder, FormGroup and FormControls. When building the form up you can set the default values from your model, then let FormControls take care of validation, etc. If the user decides to leave the page then you model is not changed. When they wish to save the changes then you can populate your model based on the values from the FormControls. Don’t need to create a “pre” version of your object, the FormControls will be your “pre” object. Hopefully I understood you issue correctly.

1 Like

What I would do is pass a clone of the animal to the edit screen.

Indeed. Thanks aoathout.
That is what I need I think. I was not aware of this.

https://ionicframework.com/docs/v2/resources/forms/

https://forum.ionicframework.com/t/how-to-validate-forms-with-angular-2-in-ionic-2/54687/3

http://www.joshmorony.com/advanced-forms-validation-in-ionic-2/

Ok, I will try one of these methods.
Thanks for the information.

Yep. Those are very good starting points.

Thanks a lot. It works.
Some parts of the code for information:

html
<form [formGroup]="animalForm" (ngSubmit)="saveAnimal()">
<ion-item>
     <ion-input type="text" formControlName="animal_name"></ion-input>
</ion-item>
...

ts:
declaration:
animal: AnimalModel;
animalForm: FormGroup;

this.animalForm = formBuilder.group({
     animal_name: [this.animal.name],
     ...
});

save:
this.animal.name = this.animalForm.controls["animal_name"].value;
...

I would suggest getting in the habit of calling get instead of directly accessing controls (or errors, similarly). This will save you from subtle AoT breakage when you do things like form.controls.animal_name in your templates.

1 Like

You’re right. Thanks. I will change that.

  public myobj:object = {
    text:'',
    time:''
  };
  constructor(){
}
ionViewDidLoad() {
for(let i in this.myobj){
  this.myobj[i]='';
}
}