Apply for Zend Framework Certification Training

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>

< How To Display Data In Ionic4 Angular 8 Node Ionic4 page design login home registration >



Ask a question



  • Question:
    {{questionlistdata.blog_question_description}}
    • Answer:
      {{answer.blog_answer_description  }}
    Replay to Question


Back to Top