Validar formulario de login en Ionic 4

Para iniciar con las validaciones en ionic 4, necesitamos importar dos librerías de angular form en nuestro archivo src/app/login/login.page.ts

import { FormGroup, FormControl } from '@angular/forms';

Para nuestras validaciones vamos instalar la librería validator, para esto necesitamos ejecutar el siguiente comando en nuestra terminal en el raíz del proyecto

npm install validator

Verificamos en que nuestro archivo package.json se agrego la dependencia validator

"dependencies":
{
...
"validator": "^10.9.0",
...
},

Importamos la librería validator en el archivo src/app/login/login.page.ts

import validator from 'validator';

Definimos las variables del formulario y las de validación

loginForm = new FormGroup({
userEmail: new FormControl(''),
userPassword: new FormControl(''),
});

loginFormValidator = {
userEmail: {
empty: '',
email: '',
},
userPassword: {
empty: '',
}
};

y creamos las funciones para validar el formulario y procesar la información

formValidator(): boolean {
if (validator.isEmpty(this.loginForm.value.userEmail)) {
this.loginFormValidator.userEmail.empty = 'La dirección de correo es requerido';
return false;
} else {
this.loginFormValidator.userEmail.empty = '';
}
if (!validator.isEmail(this.loginForm.value.userEmail)) {
this.loginFormValidator.userEmail.email = 'Ingrese una dirección de correo válida';
return false;
} else {
this.loginFormValidator.userEmail.email = '';
}
if (validator.isEmpty(this.loginForm.value.userPassword)) {
this.loginFormValidator.userPassword.empty = 'La contraseña es requerido';
return false;
} else {
this.loginFormValidator.userPassword.empty = '';
}
return true;
}

onSubmit() {
if (this.formValidator()) {
console.log('Formulario Validado');
}
}

En el archivo src/app/login/login.page.html vamos a realizar los siguientes cambios para integrar nuestra validación con el formulario

<ion-header>
<ion-toolbar>
<ion-title>Iniciar Sesión</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
<ion-list>
<ion-item>
<ion-label position="stacked">Dirección de correo</ion-label>
<ion-input formControlName="userEmail" type="email" autocapitalize="off" autocomplete="off" autocorrect="off"></ion-input>
</ion-item>
<ion-item *ngIf="loginFormValidator.userEmail.empty">
<ion-label text-wrap color="danger">
{{ loginFormValidator.userEmail.empty }}
</ion-label>
</ion-item>
<ion-item *ngIf="loginFormValidator.userEmail.email">
<ion-label text-wrap color="danger">
{{ loginFormValidator.userEmail.email }}
</ion-label>
</ion-item>
<ion-item>
<ion-label position="stacked">Contraseña</ion-label>
<ion-input formControlName="userPassword" type="password"></ion-input>
</ion-item>
<ion-item *ngIf="loginFormValidator.userPassword.empty">
<ion-label text-wrap color="danger">
{{ loginFormValidator.userPassword.empty }}
</ion-label>
</ion-item>
</ion-list>
<ion-button type="submit" color="light" expand="full">Entrar</ion-button>
</form>
</ion-content>

y para no tener errores en la compilación, necesitamos importar ReactiveFormsModule en el archivo src/app/login/login.module.ts

import { ReactiveFormsModule } from '@angular/forms';

imports: [
...
ReactiveFormsModule,
RouterModule.forChild(routes)
],

Al compilar tendremos tendremos el siguiente comportamiento en nuestra aplicación

En Ionic 4 podemos usar otros métodos de validación pero para este caso se utilizo la librería validator

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 *