Crear formulario de login en Ionic 4

Lo primero que vamos a realizar es crear nuestra pagina en la consola ejecutando el siguiente linea de código

ionic generate page login

Creando dentro los archivos en la ruta src/app/login

  • login.module.ts
  • login.page.html
  • login.page.scss
  • login.page.spec.ts
  • login.page.ts

Donde solo vamos a trabajar en el archivo login.page.html para crear nuestro formulario, pero para que nuestra aplicación nos muestre la pagina principal nuestro formulario login debemos realizar los siguiente cambio en el archivo src/app/app-routing.module.ts

{ path: '', redirectTo: 'home', pathMatch: 'full' },

Por

{ path: '', redirectTo: 'login', pathMatch: 'full' },

Agregando los componentes en la pagina de login crearemos nuestro formulario para iniciar sesión.

<ion-header>
<ion-toolbar>
<ion-title>Iniciar Sesión</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item>
<ion-labelposition="stacked">Dirección de correo</ion-label>
<ion-inputtype="text"></ion-input>
</ion-item>
<ion-item>
<ion-labelposition="stacked">Constraseña</ion-label>
<ion-inputtype="text"></ion-input>
</ion-item>
</ion-list>
<ion-buttoncolor="light"expand="full">Entrar</ion-button>
</ion-content>

Pueden ver los cambios del proyecto en el siguiente commit

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *