重新加载页面时，ReactiveForm验证不起作用

Question

我有两个页面 / auth 和 / auth / register

当我从页面 / auth 转到页面 / auth / register 时，一切正常，对页面 register进行表单验证可以。 当我直接重新加载页面 / auth / register 时，表单验证不再起作用....

我真的不明白为什么它不起作用...是因为延迟加载吗？

auth-routing.module.ts：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AuthPage } from './auth.page';

const routes: Routes = [
  {
    path: '',
    component: AuthPage,
    children: [
      {
        path: './register',
        loadChildren: () =>
          import('./register/register.module').then(
            (m) => m.RegisterPageModule
          ),
      },
      {
        path: './forgot-password',
        loadChildren: () =>
          import('./forgot-password/forgot-password.module').then(
            (m) => m.ForgotPasswordPageModule
          ),
      },
      {
        path: './reset-password',
        loadChildren: () =>
          import('./reset-password/reset-password.module').then(
            (m) => m.ResetPasswordPageModule
          ),
      },
    ],
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class AuthPageRoutingModule {}

auth.module.ts：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { AuthPageRoutingModule } from './auth-routing.module';

import { AuthPage } from './auth.page';
import { RegisterPageRoutingModule } from './register/register-routing.module';
import { ForgotPasswordPageRoutingModule } from './forgot-password/forgot-password-routing.module';
import { ResetPasswordPageRoutingModule } from './reset-password/reset-password-routing.module';

@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule,
    IonicModule,
    AuthPageRoutingModule,
    RegisterPageRoutingModule,
    ForgotPasswordPageRoutingModule,
    ResetPasswordPageRoutingModule
  ],
  declarations: [AuthPage]
})
export class AuthPageModule {}

register-routing.module.ts：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { RegisterPage } from './register.page';

const routes: Routes = [
  {
    path: 'register',
    component: RegisterPage
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class RegisterPageRoutingModule {}

register.module.ts：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { RegisterPageRoutingModule } from './register-routing.module';

import { RegisterPage } from './register.page';

@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule,
    IonicModule,
    RegisterPageRoutingModule
  ],
  declarations: [RegisterPage]
})
export class RegisterPageModule {}

register.page.ts

import { Component, OnInit } from '@angular/core';
import {
  FormGroup,
  FormControl,
  Validators,
  FormBuilder,
} from '@angular/forms';
import { ConfirmPasswordValidator } from '../../validators/confirm-password.validator';
import { AuthService } from '../auth.service';
import { LoadingController, MenuController, NavController } from '@ionic/angular';
import { AlertService } from 'src/app/utils/alert.service';

@Component({
  selector: 'app-register',
  templateUrl: './register.page.html',
  styleUrls: ['./register.page.scss'],
})
export class RegisterPage implements OnInit {
  form: FormGroup;
  isLoading = false; // Loading boolean when wainting for server response

  constructor(
    private fb: FormBuilder,
    private authService: AuthService,
    private navCtrl: NavController,
    private loadingCtrl: LoadingController,
    private alertService: AlertService,
    private menuCtrl: MenuController
  ) {}

  ngOnInit() {
    // Initialize the form
    console.log('test');
    this.form = this.fb.group(
      {
        name: new FormControl(null, {
          updateOn: 'blur',
          validators: [Validators.required],
        }),
        email: new FormControl(null, {
          updateOn: 'blur',
          validators: [
            Validators.required,
            Validators.pattern(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/),
          ],
        }),
        password: new FormControl(null, {
          updateOn: 'blur',
          validators: [Validators.required, Validators.minLength(6)],
        }),
        confirmPassword: new FormControl(null, {
          updateOn: 'change',
        }),
      },
      { validator: ConfirmPasswordValidator.MatchPassword }
    );

    // Disable the menu on this page
    this.menuCtrl.enable(false);
  }

  // Disable the menu on this page
  ionViewWillEnter() {
    this.menuCtrl.enable(false);
  }

  // Enable the menu when leaving this page
  ionViewWillLeave() {
    this.menuCtrl.enable(true);
  }

  // Register the user
  onRegister() {
    this.isLoading = true;
    this.loadingCtrl
      .create({ keyboardClose: true, message: 'Signing up...' })
      .then((loadingEl) => {
        loadingEl.present();
        this.authService
          .signup(
            this.form.value.name,
            this.form.value.email,
            this.form.value.password
          )
          .subscribe(
            (resData) => {
              this.isLoading = false;
              loadingEl.dismiss();
              this.navCtrl.navigateForward('/', {replaceUrl: true});
            },
            (erRes) => {
              loadingEl.dismiss();
              let message = '';
              switch (erRes.error.error.code) {
                case 'REGISTER_USER_NOT_ALLOWED':
                  message =
                    'You are not allowed to register on this application';
                  break;
                default:
                  message = 'An error occure, please try later...';
                  break;
              }
              this.alertService.showErrorAlert(
                'Signing up failed',
                message,
                'Ok'
              );
            }
          );
      });
  }
  
  // Navigate back
  onBack(){
    this.navCtrl.navigateBack(['/', 'auth']);
  }
}

任何帮助都将受到欢迎！谢谢！