this.enteringView.pageRef(...) is null

[paoesco]

Short description of the problem:

I have a login page with Ionic Segments, one is Sign in, the other one is Create Account (first load of the page is Sign in).
After creating an account, the method is changing the segment to Sign in.
Then if I try to sign in with the created account (or any other), I have a this.enteringView.pageRef(...) is null in Firefox console.
On IE : Unable to get property 'nativeElement' of undefined or null reference

What behavior are you expecting?

Expected behaviour is after successfully register to the app and changing to sign in page, user should be able to sign in without an error.

Steps to reproduce:

1. Open app on login page (first page of the app)
2. Click on Create Account (Popup confirming the creation and opening Sign in segment)
3. Try to sign in with the previous created account

https://github.com/paoesco/walkingdog/blob/master/walkingdog-mobile/src/pages/login/login.ts

    signup(value: string) {
      this.loader.present();
      console.log(`Submitted values : email = ${value.email}, password = ${value.password}`);
      let details: UserDetails = {'email': value.email, 'password': value.password};
      this.auth.signup(details).then(() => {
        alert('Signed up')
        this.segments = 'login';
        this.loader.dismiss();
      }, (err: IDetailedError<string[]>) => {
        for (let e of err.details) {
          if (e === 'conflict_email') {
            alert('Email already exists.');
          } else {
            alert(e);
          }
        }
        this.loader.dismiss();
      });
    }

https://github.com/paoesco/walkingdog/blob/master/walkingdog-mobile/src/pages/login/login.html

<ion-content padding>

  <div padding>
    <ion-segment [(ngModel)]="segments">
      <ion-segment-button value="login">
        Sign in
      </ion-segment-button>
      <ion-segment-button value="signup">
        Create account
      </ion-segment-button>
    </ion-segment>
  </div>

  <div [ngSwitch]="segments">
    <ion-list *ngSwitchCase="'login'">
      <form [formGroup]="loginForm" (ngSubmit)="login(loginForm.value)">
        <ion-item>
          <ion-input type="email" placeholder="Email" [formControl]="loginForm.controls['email']"></ion-input>
        </ion-item>

        <ion-item>
          <ion-input type="password" placeholder="Password" [formControl]="loginForm.controls['password']"></ion-input>
        </ion-item>

        <button ion-button block type="submit">
          Sign in
        </button>
      </form>
      <button ion-button block color="danger" (click)="loginWithGoogle()">
        Sign in with Google+
      </button>
    </ion-list>

    <ion-list *ngSwitchCase="'signup'">
      <form [formGroup]="signupForm" (ngSubmit)="signup(signupForm.value)">
        <ion-item>
          <ion-input type="email" placeholder="Email" [formControl]="signupForm.controls['email']"></ion-input>
        </ion-item>

        <ion-item>
          <ion-input type="password" placeholder="Password" [formControl]="signupForm.controls['password']"></ion-input>
        </ion-item>

        <button ion-button block type="submit">Create account</button>
      </form>
    </ion-list>
  </div>

</ion-content>

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)
Github repo : https://github.com/paoesco/walkingdog/tree/master/walkingdog-mobile

Which Ionic Version? 1.x or 2.x
2

Run ionic info from terminal/cmd prompt: (paste output below)

Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
OS: Windows 7 SP1
Node Version: v6.6.0

[paoesco]

Hi,

Actually it's when a form submission results in an error, and then again submit the same form with right data that is causing a blank page (because of a JavaScript error).

[paoesco]

Hi,

Any updates on this issue ?

I tried with RC3 but it didn't fix it.

[ghost]

@paoesco @jgw96 Any news regarding this would be really appreciated. Thanks.

[paoesco]

Still same issue with RC3.

When I submit a form, I perform a validation and then I return false to prevent the form to be submitted.
And then if I try to submit it again, I have this error message :

TypeError: Cannot read property 'nativeElement' of null at LoadingMdPopIn.init

(Chrome debug console).

[paoesco]

Same issue with RC4.

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.47
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 7
Node Version: v6.6.0
Xcode version: Not installed

Below is my html form :

<form [formGroup]="loginForm">
<!-- inputs here -->
    <button ion-button block color="dark" type="submit" [disabled]="!loginForm.valid">
      Log In
    </button>
</form>

Below is how I handle an error in login function :

 (err:Response) => {
          if (err.status == 400 && err.statusText === 'user_not_enabled') {
            this.loader.dismiss();
            alert('Your account has not been enabled yet. Please activate it by clicking on the link provided in e-mail');
            return false;
          } else {
            this.loader.dismiss();
            alert('Wrong credentials');
            return false;
          }

I am returning false in order to avoid the form to be submitted.
But if I submit it again, I have the error message previously posted.

Is there another way to prevent form submission when there is something wrong ?

[paoesco]

I tried to replace the submit button with a link (as per ng book 2) but it is not working either

Old

<form [formGroup]="loginForm">
<!-- inputs here -->
    <button ion-button block color="dark" type="submit" [disabled]="!loginForm.valid">
      Log In
    </button>
</form>

New

<form [formGroup]="loginForm" (ngSubmit)="login(loginForm)">
<!-- inputs here -->
    <a ion-button block color="dark" (click)="login(loginForm)" >
      Log In
    </a>
</form>

I also tried to remove all the return false (validation or error handling) without success

[paoesco]

I found the problem !
It wasn't because of the form submission but because of the Loading component :

#6209

I close this issue.
Sorry for the inconvenience.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.