Loginform not working until the page is being reloaded

Ionic Framework ionic-v3
1

I am having a problem with my loginform. Either the submit button gets disabled saying the form is invalid even though it isn’t. What also happens occasionaly is that the button works but im getting error saying the form is invalid in the console and when im trying to console.log the inputs, they are showing null.

From what I can tell, this problem might have started after I implemented an authguard where I redirect the user to loginscreen if they arent logged in. When I put the loginpage as the “starterpage” this problem does not occur. I also tried initializing the form in ngoninit without any success.

The wierd thing is if I go to the registerpage and then back 2 times, the form starts working (it also starts working if I reload the page).

HTML file:

          <form [formGroup]="loginForm">
          <ion-grid class="loginBox">
      <ion-row>
        <ion-col>
          <ion-input formControlName="email" type="email" placeholder="Email"></ion-input>
        </ion-col>
      </ion-row>
      <ion-row class="loginBoxPassword">
        <ion-col>
          <ion-input formControlName="password" type="password" placeholder="Password"></ion-input>
        </ion-col>
      </ion-row>
      <ion-row class="loginLabelRow">
        <ion-col class="loginBoxLabelLeft">
          <ion-label (click)="toSignup()" routerDirection="forward">Sign up</ion-label>
        </ion-col>
        <ion-col class="loginBoxLabelRight">
          <ion-label (click)="toForgotPassword()">Forgot password?</ion-label>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <ion-button (click)="loginUser(loginForm)" expand="full" [disabled]="loginForm.invalid">Sign in</ion-button>
        </ion-col>
      </ion-row>

    </ion-grid>

  </form>

TS file:

import { Component, OnInit } from '@angular/core';
import {FormGroup, FormBuilder, Validators, ReactiveFormsModule, FormControl} from '@angular/forms'
import {LoadingController, AlertController} from '@ionic/angular';
import {AuthService} from '../../services/user/auth.service';
import {Router} from '@angular/router';

     export class LoginPage implements OnInit {

  public loginForm: FormGroup;
  public loading: HTMLIonLoadingElement;

    constructor(
    private formBuilder: FormBuilder, 
    public loadingController: LoadingController, 
    private router: Router, 
    public authService: AuthService, 
    public alertController: AlertController
) {

    this.loginForm = this.formBuilder.group({
      email: ['', Validators.compose([Validators.required, Validators.email])],
      password: ['', Validators.compose([Validators.required, Validators.minLength(3)])],
    });
  }

  ngOnInit() {
  }

  toSignup(){
    this.router.navigateByUrl('signup');
  }

  toForgotPassword(){
    this.router.navigateByUrl('forgotpassword');
  }


  async loginUser(loginForm: FormGroup): Promise<void>{
    console.log(’test’, loginForm.value.email, loginForm.value.password);
    if (!loginForm.valid) {
      console.log('not valid')
    }else {
      this.loading = await this.loadingController.create({
        spinner: 'crescent',
      });
      await this.loading.present();
      const email = loginForm.value.email;
      const password = loginForm.value.password;

      this.authService.loginUser(email, password).then( () => {
        this.loading.dismiss().then(() => {
          this.router.navigateByUrl('home');
        });
      },
        error => {
          this.loading.dismiss().then(async () => {
            console.log('Wrong email or password!');
          });
        }
      );
    };
  }


}

Thank you in advance for any help solving this problem. I have googled around alot without finding anyone with a similar problem.

2

This makes me suspect a race condition that occasionally throws an error that you’re not catching. Can you check the JavaScript console?

1 Like
3

Thank you for your answer. I checked the console now this is what I can see:

common.js:290 Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator

Native: tried calling SplashScreen.hide, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator

Navigation triggered outside Angular zone, did you forget to call ‘ngZone.run()’?

4

Edit: Thanks again Rapropos for your answer. After checking the console i found out that the problem was this:

Navigation triggered outside Angular zone, did you forget to call ‘ngZone.run()’?

By doing this in my Authguard fixed the problems:

    this.zone.run(() => this.router.navigateByUrl('login')).then();