¬ŅQu√© es Ionic?

1

Requisitos del curso y presentación del proyecto

2

¬ŅQu√© hay de nuevo en Ionic 4?

3

¬ŅQu√© ha cambiado en Ionic?

4

Instalación de Ionic y templates básicos

5

Instalación de Capacitor y uso en Android Studio

6

Uso de Capacitor y xCode

7

Sincronizando nuestro proyecto con los emuladores

Componentes b√°sicos de Ionic

8

El componente Slides

9

CSS y Custom Properties de los componentes de Ionic

10

Slides din√°micos

11

Angular Router e Ionic Storage

12

Controlar la navegación con Guards

13

Utilidades de CSS con Ionic

14

Crear una p√°gina de login

15

Validar inputs del formulario de login

16

Envío del formulario

17

Servicio para validar credenciales

18

Agregar Guards a nuestro login

19

Crear una p√°gina de registro

20

Navegación entre login y registro

21

Agregar un men√ļ con el componente Menu

22

Dar funcionalidad y estilos al men√ļ

23

Uso de componente Slides y opciones avanzadas

Consumo y manejo de informacion con Ionic

24

Consumiendo un API para llenar información de nuestros artistas

25

P√°gina completa con artistas, canciones y √°lbums

26

El componente Modal y el Modal Controller

27

Llenar de contenido el Modal

28

Componente Footer y funcionalidad del Modal

29

Construyendo nuestro reproductor

30

Lógica de nuestro reproductor

31

RETO: Vista de √°lbums

Acceso al hardware

32

Usar la cámara a través de Capacitor

33

Corrección de errores y afinando detalles

34

Mejorando nuestra p√°gina de Settings con CSS

35

P√°gina Sports y Angular Maps

36

Crear la p√°gina Sport

37

RETO: Buscador din√°mico en Sports

38

Llevar nuestra aplicación a producción con Android

39

Llevar nuestra aplicación a producción con iOS y cierre del curso

No tienes acceso a esta clase

¬°Contin√ļa aprendiendo! √önete y comienza a potenciar tu carrera

Curso de Ionic 4

Curso de Ionic 4

Sebastián Gómez

Sebastián Gómez

Validar inputs del formulario de login

15/39
Recursos

Aportes 8

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Validar inputs del formulario de login
agregamos password de type password al template

<ion-item>
    <ion-label>Password</ion-label>
    <ion-input type="password" formControlName="password"></ion-input>
</ion-item>

en el componente copiamos la definición de email y pegamos abajo y lo cambiamos el nombre por password.
Ajustamos las validaciones para password.
Requerido, minLength donde especificamos caracteres mínima.

password: new FormControl('', Validators.compose([
        Validators.required,
        Validators.minLength(5)
      ])),

Agregamos mensajes al usuario sobre el llenado de los campos
para esto en el component creamos variable con mensajes en json
cuando error sea de tipo required el mensaje es ‚Äútal‚ÄĚ
si es de tipo pattern el mensaje es ‚Äútal otro‚ÄĚ

validationMessages = {
    email: [
      {
        type: 'required', message: 'El email es requerido'
      },
      {
        type: 'pattern', message: 'El email es incorrecto'
      }]
  };

En el html creamos un div con una class llamada validation-error
Agregamos un ng-conteiner con un *ngFor que recorra las validaciones
dentro de un div agregamos un *ngIf donde traemos el campo email y verificamos si tiene un error. Adem√°s si el campo ya est√° sucio nos muestre el mensaje. O si ya se hizo focus en el input

<div class="validation-error">
    <ng-container *ngFor="let validation of validationMessages.email">
      <div
        *ngIf="
          (loginForm.get('email').hasError(validation.type) &&
            loginForm.get('email').dirty) ||
            loginForm.get('email').touched
        "
      >
      </div>
    </ng-container>
  </div>

Para el password agregamos lo mismo al html solo que modificamos email por password

<div class="validation-error">
    <ng-container *ngFor="let validation of validationMessages.password">
      <div
        *ngIf="
          (loginForm.get('password').hasError(validation.type) &&
            loginForm.get('password').dirty) ||
            loginForm.get('password').touched
        "
      >
      </div>
    </ng-container>
  </div>

en el page.ts agregamos al json

password: [
        {
          type: 'required', message: 'El password es requerido'
        },
        {
          type: 'minLength', message: 'Tama√Īo minimo 5 caracteres'
        }],

Tengo un problema, cuando mi input pierde el focus la validación se pierde y me salen todos los mensajes de error, no estoy seguro de por que es

<div class="validation-error">
      <ng-container *ngFor="let validation of validation_messages.email">
        <div
          *ngIf="(loginForm.get('email').hasError(validation.type) && loginForm.get('email').dirty) || loginForm.get('email').touched">
          {{validation.message}}
        </div>
      </ng-container>
    </div>```

IONIC 6

Las validaciones explicadas por el profesor deberían funcionar bien en Ionic 6, pero hay un error en el archivo login.page.html, el archivo completo debe quedar así:

<ion-content>
  <figure class="ion-text-center ion-padding">
    <img src="../../assets/img/logo.png" alt="Logo Platzi Music">
  </figure>
  <form [formGroup]="loginForm" (ngSubmit)="loginUser(loginForm.value)">
    <ion-item>
      <ion-label>Email:</ion-label>
      <ion-input formControlName="email"></ion-input>
    </ion-item>
    <div class="validation- error">
      <ng-container *ngFor="let validation of validationMessages.email">
        <div *ngIf="loginForm.get('email').hasError(validation.type) && (loginForm.get('email').dirty || loginForm.get('email').touched)">
          {{ validation.message }}
        </div>
      </ng-container>
    </div>
    <ion-item>
      <ion-label>Password:</ion-label>
      <ion-input type="password" formControlName="password"></ion-input>
    </ion-item>
    <div class="validation-error">
      <ng-container *ngFor="let validation of validationMessages.password">
        <div *ngIf="loginForm.get('password').hasError(validation.type) && (loginForm.get('password').dirty || loginForm.get('password').touched)">
          {{ validation.message }}
        </div>
      </ng-container>
    </div>
  </form>
</ion-content>

Tengan en cuenta que la variable usada por el profesor validation_messages, la cambié por validationMessages

como para que tengan en cuenta que en la validación de los campos estan mal unos parentesis, lo que hace que se muestre todos los errores de validación de los campos, Aca les dejo el link a mi repo con el commit de esta clase para el que le pueda servir

Solucione el Error que había en el formulario,

La validación del hasError debe estar antes y después de la sentencia OR

<div class="validation-error">
      <ng-container *ngFor= 'let validation of validation_messages.password'>
        <div *ngIf= 
          "(loginForm.get('password').hasError(validation.type) && loginForm.get('password').dirty) 
          || (loginForm.get('password').touched && loginForm.get('password').hasError(validation.type))
          "
        >  
          {{ validation.message }}
        
        </div>

El warning del minLength no me funciona. Simplemente no aparece. Modifiqué la lógica del if para que salten todos los errores y así si sale.
Mi index:

<ng-container *ngFor="let validation of validation_messages.passwd"> <div *ngIf="(loginForm.get('passwd').hasError(validation.type) && loginForm.get('passwd').dirty) || loginForm.get('passwd').touched"> {{validation.message}} </div> </ng-container>
Mi ts:
validation_messages = { email: [ {type: 'required', message: 'El email es requerido.'}, {type: 'email', message: 'Este no es un email v√°lido'} ], passwd: [ {type: 'minLength', message: 'Minimo 5 caracteres en tu password'}, {type: 'required', message: 'El password es requerido.'}, ], }

una buena forma de reducir algo del codigo html y hacer mas entendible la condicionar es usar los getter de typescript

Archivo TS

get formEmail() {
    return this.formLogin.get('email');
  }

HTML

<div class="validation-error">
            <ng-container *ngFor="let validation of validationMessage.email">
                <div *ngIf="formEmail.hasError(validation.type) &&
                            (formEmail.dirty ||
                             formEmail.touched)">
                    {{validation.message}}
                </div>
            </ng-container>
        </div>

Para construir el formulario lo hice de una manera que en mi opinión es más limpia.

this.loginForm = this.formBuilder.group({
      email: ['', [Validators.required, Validators.pattern('^[a-zA-Z0-9_.+-][email protected][a-zA-z0-9-]+.[a-zA-Z0-9-.]+$')]],
      password: ['', [Validators.required, Validators.minLength(8)]]
    });

Y para las validaciones creé una función

invalidForm(field: string) {
    return this.loginForm.get(field).invalid && this.loginForm.get(field).touched;
  }

Despues solo la llamamos con el campo en el html sin necesidad de volver a escribir todas las validaciones

<div *ngIf="invalidForm('password')">
          {{ validation.message }}
</div>