Ionic 2, using AlertController

When we fill data in a form is a good idea show to user what he has written before save the data and in case there is an error give it a chance to modify it. For that in Ionic 2 we can use AlertController. Here you can find more information about AlertController.

An alert dialog can be used for show information to the user or collect it. I opted for use both options in a same dialog and so streamline the process.

In this case, the alert dialog it will show the data introduced in the form and doing so in a input fields which it allows modify it. For that,  the dialog  will have an input field for each entry and two buttons, a Cancel button to cancel and dismiss the dialog and a Ok button to save the data and dismiss the dialog.

The first step is import the AlertController  from ionic-angular in our controller

   
   import { NavController, AlertController } from 'ionic-angular'

Next we add the AllertController how a parameter in the constructor

   
   constructor(public navCtrl: NavController, 
               public alertCtrl: AlertController, 
               public dbService: DbService) {

   }   

And now we create a function to present the alert to the user

  addMovement() {
    this.data = {date: this.date, expense: this.expenses, 
                 description: this.description, import: this.import};
    let dateToSave = this.date;

    let dataAlert = this.alertCtrl.create ({
      title: 'These data are correct?',
      inputs: [
        {
          name: 'date',

          placeholder: 'Date',
          value: dateToSave.substr(0, 10)          
        },
        {
          name: 'expense',

          placeholder: 'Expense',
          value: this.data.expense          
        },
        {
          name: 'description',

          placeholder: 'Description',
          value: this.data.description
        },
        {
          name: 'import',

          placeholder: 'Import',
          value: this.data.import,
          type: 'number'
       }
      ],
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          handler: () => {
            dataAlert.dismiss();
            return false;
          }          
        },
        {
          text: 'Ok',
          role: 'ok',
          handler: (dialogData: any) => {

            
            this.data.expense = dialogData.expense;

            this.data.description = dialogData.description;

            this.data.import = dialogData.import;

            this.dbService.insertMovement(this.data).then(() => {

              this.expenses = "";

              this.description = "";

              this.import = "";

              dataAlert.dismiss();

              return false;
            });
          }
        }
      ]
    });

    dataAlert.present();
  }
}
 

In the Ok handler as we don't know what field has been modified, we update all data with the alert dialog fields, next insert the data in the database, clean the fields in the screen and dismiss the dialog.

The final result looks like this