Ionic

Step - 1 D:\xampp\htdocs\IonicFormValidationV2\src\app\app-routing.module.ts

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [
  { path: '', redirectTo: 'auth', pathMatch: 'full' },
  { path: 'home', loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)},
  { path: 'auth', loadChildren: './pages/auth/auth.module#AuthPageModule' },
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

step - 2 D:\xampp\htdocs\IonicFormValidationV2\src\app\pages\auth\auth.page.html

<ion-header>

  <ion-toolbar>

    <ion-title>Authenticate</ion-title>

  </ion-toolbar>

</ion-header>

 <ion-content padding="true">

    <form [formGroup]="authForm" (ngSubmit)="onSubmit(authForm.value)">

        <ion-item>

            <ion-label>User Name (Email)</ion-label>

            <ion-input formControlName="email"></ion-input>

        </ion-item>

 <div *ngIf="submitted && frm.email.errors" class="invalid-feedback">

            <ion-item *ngIf="frm.email.errors.required">

                <p style="color:red">Email is required!</p>

            </ion-item>

            <ion-item *ngIf="frm.email.errors.email">

                <p style="color:red">Email must be a valid email address!</p>

            </ion-item>

        </div>       

        <ion-item>

            <ion-label>Password</ion-label>

            <ion-input formControlName="password"></ion-input>

        </ion-item>

        <div *ngIf="submitted && frm.password.errors" class="invalid-feedback">

            <ion-item *ngIf="frm.password.errors.required">

                <p style="color:red">Password is required!</p>

            </ion-item>

            <ion-item *ngIf="frm.password.errors.minlength">

                <p style="color:red">Password must be at least 6 characters!</p>

            </ion-item>

        </div>

        <ion-grid>

            <ion-row>

                <ion-col>

                    <ion-button expand="block" size="large" type="submit">Authenticate</ion-button>    

                </ion-col>

                <ion-col>

                    <ion-button expand="block" size="large" type="reset" (click)="onReset()">Reset</ion-button>

                </ion-col>

            </ion-row>

        </ion-grid>

    </form>

</ion-content>