When I click the login button several times, it loads the same number of times that the button is clicked. How can I prevent this?

advertisements

When I Click Login button several times before the pages gets navigated after pressing login button, It opens the page equal number of time as that of Login buttton pressed. For example: When I click on login button it is navigated to page xyz. Suppose I click 10 times in succession the login button then page xyz will open 10 times and then I have to press 10 times to logout xyz. How can I prevent this?And what is the reason behind this? The application is developed on ionic2 and angular2. If any further information is needed please let me know. Screenshot is attached with this.

My Code: `

<ion-content padding>
  <form (submit)="onLogin()">
    <ion-item>
      <ion-label stacked color="secondary">Email</ion-label>
      <ion-input type="email" required [(ngModel)]="email" name="email"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label stacked color="secondary">Password</ion-label>
      <ion-input type="password" required minlength="6" maxlength="10" name="password" [(ngModel)]="password"></ion-input>
    </ion-item>
    <br>
    <button ion-button color="secondary" block class="abc" type="submit">Login</button>
  </form>`


Just like @Math10 suggested, a better way to handle this would be by showing a loading indicator:

An overlay that can be used to indicate activity while blocking user interaction.

This way, you'd not only block user interaction, but also the user would get some feedback and would know that something is happening.

public onLogin(): void {
  let loading = this.loadingCtrl.create({
    content: 'Please wait...'
  });

  // Show the loading indicator
  loading.present();

  // your code...

  // After the server returns a response, you can hide the loading indicator
  loading.dismiss().then(() => {
    // here you can redirect the user to the next page or show an error
  });
}