Форма входа не работает, пока страница не будет перезагружена IONIC - PullRequest
Новая
       21

Форма входа не работает, пока страница не будет перезагружена IONIC

0 голосов
/ 09 июля 2019

У меня проблема с формой входа в Ionic. Либо кнопка отправки отключается, говоря, что форма недействительна, хотя это не так. Иногда также происходит то, что кнопка работает, но я получаю сообщение об ошибке, говорящее, что форма недопустима в консоли, и когда я пытаюсь console.log вводить, они показывают нулевое значение.

Из того, что я могу сказать, эта проблема могла начаться после того, как я реализовал AuthGuard , где я перенаправляю пользователей на экран входа в систему, если они не вошли в систему. Когда я помещаю страницу входа в качестве На «стартовой странице» этой проблемы не возникает.

Странная вещь: если я захожу на страницу регистрации, а затем возвращаюсь 2 раза, форма начинает работать (она также начинает работать, если я перезагружаю страницу).

HTML-файл: 

          <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: 

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!');
          });
        }
      );
    };
  }


}

Заранее благодарю за любую помощь в решении этой проблемы. Я много гуглял, не находя никого с подобной проблемой.

1 Ответ

0 голосов
/ 09 июля 2019

Не уверен, что это решение, но сравнивая мой код с вашим, я вижу, что вы инициализируете форму в конструкторе, почему я делаю это ngOnInit метод

Можете ли вы удалить код внутри конструктора и изменить остальные значения на 

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