Login form not working until the page is being reloaded IONIC

Question

I am having a problem with my login form in Ionic. Either the submit button gets disabled saying that form is invalid even though it isn't. What also happens occasionally is that the button works, but I'm getting an error saying that form is invalid in the console and when I'm 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 a login screen if they aren't logged in. When I put the login page as the "starter page" this problem does not occur.

The weird thing is if I go to the register page 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 in solving this problem. I have googled around a lot without finding anyone with a similar problem.

can you post a more complete snippet of your TS file please? — RobrechtVM

RobrechtVM RobrechtVM · Accepted Answer · 2019-07-09T18:02:27

Not sure if this is the solution but comparing my code to yours I see that you initialize the form in the constructor why I do it the ngOnInit method

Can you remove the code inside the constructor and change the rest to

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

Login form not working until the page is being reloaded IONIC

1 Answers