CODEWITHSUNDEEP
javascriptiosangularjsionic2ionic3
BRass
BRass

Reputation: 3838

Ionic 2+, iOS only issue: resetting plugins due to page load

I have a very strange issue in my ionic 3 app. I'm adding a feature to an app, and the feature involves a multi-step input process using Angular 2+ forms and validators. All was fine on web, Android and older iOS devices (iOS 9). On iOS 10 I get the following after submitting my first form step:

Resetting plugins due to page load

Then the app re-starts. The main trigger point seems to be setting a boolean after this first step which hides the first form and shows the second. Commenting out that one line prevents the issue.

Is there something I can do to find more information about why this error is being thrown in iOS 10 only? Extra logging, for example?

HTML

<ion-card>
    <ion-card-header>
        <ion-icon name="person-add"></ion-icon> Sign Up!
    </ion-card-header>

    <!--Step 1 - confirm user-->
    <ion-list no-lines *ngIf="!hasConfirmedStep1">
      <form [formGroup]="formStepOne">

       <...SNIP...>

        <ion-item>
          <button ion-button icon-right float-right small (click)="checkUser()" [disabled]="!formStepOne.valid">
            Next
            <ion-icon name="arrow-round-forward"></ion-icon>      
          </button>
        </ion-item>
      </form>
    </ion-list>

    <!--Step 2...Create Account-->
    <ion-list no-lines *ngIf="hasConfirmedStep1 && !hasConfirmedStep2">
      <form [formGroup]="formStepTwo">


        <!--Email/Confirm email-->
        <div formGroupName="validEmail">

        <...SNIP...>

        </div>
        <ion-item>
          <button ion-button icon-right float-right small (click)="createUser()" [disabled]="!formStepTwo.valid">
            Next
            <ion-icon name="arrow-round-forward"></ion-icon>      
          </button>
        </ion-item>
      </form>

    </ion-list>
</ion-card>

TS

async checkUser() {

    this.hasSubmittedStep1 = true;
    this.errorMessage = this.successMessage = "";

    if (!this.formStepOne.valid) {
      this.loggingService.debug("Invalid signup form for Check User");
      this.errorMessage = "Please enter valid input.";
    }
    else {
      this.loggingService.debug("Valid signup form for Check User.  Checking info...");

      //Confirm User


      this.successMessage = 'Confirmed!  Please Create Account.';
      this.hasConfirmedStep1 = true;
    }
  }

Upvotes: 1

Views: 441

Answers (1)

BRass
BRass

Reputation: 3838

I'm not sure why, but on iOS 10 the issue seemed to be hiding the HTML [formGroup] tags. This page constructor uses formBuilder.group() to instantiate objects for these forms. Maybe something on iOS 10 expects there to be HTML forms associated with these?

My fix was to simply re-structure the page so that the <form> tags were always displayed, but within them I had a <div> that I placed the *ngIf on to show/hide the interior visual elements. Strange, but seems to work.

Upvotes: 1

Related Questions