¿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

Crear una página de login

14/39
Recursos

Aportes 13

Preguntas 2

Ordenar por:

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

Por si a alguien le sirve, aquí les dejo la expresión regular que usó Sebastian para validar el email del formulario
"^[a-zA-Z0-9_.+-][email protected][a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$"

Se puede utilizar Validators.email en lugar de la expresión regular

Creo que no es necesario que se pase el value del formulario en el ngSubmit, porque desde el controlador podría acceder a él con this.loginForm.value.

¿Cual es la diferencia entre paginas y componentes?

Crear una página de login
Para formularios reactivos importamos el módulo correspondiente en donde vamos a utilizar formularios reactivos.
en login.module.ts
Importamos ReactiveFormsModule

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

en el imports

ReactiveFormsModule

esto hará que valide dinámicamente usuario a medida q se ingresa

login.page.ts
declaramos el nombre de nuestro formulario de tipo FormGroup

  loginForm: FormGroup;

importamos si no lo hizo

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

En el constructor:
inyectamos FormBuilder
le decimos que construya un formulario con el grupo de campos que vamos a declarar a través del formBuilder
indicamos el campo email de tipo FormControl
indicamos las validaciones para el campo email (requerida y una expresión regular que controla que sea de tipo email)

constructor(
   private formBuilder: FormBuilder
 ) { 
   this.loginForm = this.formBuilder.group({
     email: new FormControl("",Validators.compose([
       Validators.required,
       Validators.pattern("^[a-zA-Z0-9_.+-][email protected][a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$")
     ]))
   });
  }

El import quedará así

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

etiqueta form
como es reactivo recibe un formGroup
declaramos que va pasar cuando el usuario haga clic en enviar con ngSubmit: invocamos a función loginUser que va recibir el valor del formulario

<form 
  [formGroup]="loginForm"
  (ngSubmit)="loginUser(loginForm.value)">
  </form>

etiqueta
<ion-item>
le estamos diciendo a Ionic que renderice todo lo que está dentro en una sola línea como si fuera una lista.

La etiqueta quedará así: a input debemos indicarle a qué label pertenece. Siempre es recomendable usar las etiquetas ionic sobre las html ya que renderizan mejor.

<ion-item>
    <ion-label>Email</ion-label>
    <ion-input formControlName="email"></ion-input>
  </ion-item>

IONIC 6

Hoy Ene-2022 en Ionic 6 sigue funcionando exactamente como lo explico el profesor, por ahora solo es seguir sus pasos.

si no te parecen los estilos de las validaciones en los inputs de texto, te recomiendo que si estas en el navegador pruebes en modo incognito o borres cache, otra forma de ver si aparecen es correr el projecto en Android, en mi caso me funcionaron en las dos, pero en chrome no (solo en modo incognito).

Ami me sale el siguiente Error:

core.js:6014 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'formGroup' since it isn't a known property of 'form'. ("
  <div class="sepretor-or ion-text-center"><p>Ó</p><hr></div>

<form [ERROR ->][formGroup]="loginForm" (ngSubmit)="loginUser(loginForm.value)">

  <ion-list>
"): ng:///LoginPageModule/[email protected]:6
No provider for ControlContainer ("
  <div class="sepretor-or ion-text-center"><p>Ó</p><hr></div>

[ERROR ->]<form [formGroup]="loginForm" (ngSubmit)="loginUser(loginForm.value)">

  <ion-list>
"): ng:///LoginPageModule/[email protected]:0
No provider for NgControl ("
        <ion-icon name="mail"></ion-icon>
      </ion-label>
      [ERROR ->]<ion-input formControlName="email" type="text" name="email" required placeholder="Email *"></ion-inpu"): ng:///LoginPageModule/[email protected]:6
Can't bind to 'formGroup' since it isn't a known property of 'form'. ("
  <div class="sepretor-or ion-text-center"><p>Ó</p><hr></div>

<form [ERROR ->][formGroup]="loginForm" (ngSubmit)="loginUser(loginForm.value)">

  <ion-list>
"): ng:///LoginPageModule/[email protected]:6
No provider for ControlContainer ("
  <div class="sepretor-or ion-text-center"><p>Ó</p><hr></div>

[ERROR ->]<form [formGroup]="loginForm" (ngSubmit)="loginUser(loginForm.value)">

  <ion-list>
"): ng:///LoginPageModule/[email protected]:0
No provider for NgControl ("
        <ion-icon name="mail"></ion-icon>
      </ion-label>
      [ERROR ->]<ion-input formControlName="email" type="text" name="email" required placeholder="Email *"></ion-inpu"): ng:///LoginPageModule/[email protected]:6
Error: Template parse errors:
Can't bind to 'formGroup' since it isn't a known property of 'form'. ("
  <div class="sepretor-or ion-text-center"><p>Ó</p><hr></div>

<form [ERROR ->][formGroup]="loginForm" (ngSubmit)="loginUser(loginForm.value)">

  <ion-list>
"): ng:///LoginPageModule/[email protected]:6
No provider for ControlContainer ("
  <div class="sepretor-or ion-text-center"><p>Ó</p><hr></div>

[ERROR ->]<form [formGroup]="loginForm" (ngSubmit)="loginUser(loginForm.value)">

  <ion-list>
"): ng:///LoginPageModule/[email protected]:0
No provider for NgControl ("
        <ion-icon name="mail"></ion-icon>
      </ion-label>
      [ERROR ->]<ion-input formControlName="email" type="text" name="email" required placeholder="Email *"></ion-inpu"): ng:///LoginPageModule/[email protected]:6
Can't bind to 'formGroup' since it isn't a known property of 'form'. ("
  <div class="sepretor-or ion-text-center"><p>Ó</p><hr></div>

<form [ERROR ->][formGroup]="loginForm" (ngSubmit)="loginUser(loginForm.value)">

  <ion-list>
"): ng:///LoginPageModule/[email protected]:6
No provider for ControlContainer ("
  <div class="sepretor-or ion-text-center"><p>Ó</p><hr></div>

[ERROR ->]<form [formGroup]="loginForm" (ngSubmit)="loginUser(loginForm.value)">

  <ion-list>
"): ng:///LoginPageModule/[email protected]:0
No provider for NgControl ("
        <ion-icon name="mail"></ion-icon>
      </ion-label>

Excelente clase…

fromularios reactivos ==> improtar en login.module.ts ReactiveFormsModule

luego crear el componente formulario de tipo FormGroup (hay que importarlo) en login.page.ts, e inyectar un formBuilder de tipo FormBuilder en el constructor de LoginPage.

Dentro del constructor se declara un el loginForm como un formBuilder.group, con campos email y contraseña, con sus respectivos validators.

En el HTML se maqueta un formulario con dos ion-item (con un ion-label y un ion-input cada uno) para el email y el passwords

Seguí al pie de la letra las indicaciones del profesor, pero en mi caso no me aparecen las líneas rojas o verdes que visualmente indican si se están cumpliendo con las validaciones del formulario. ¿Que podría ser?

En lugar de agregar new FormGroup pueden usar el mismo FormBuilder:

this.loginForm = this.fb.group({ email: ['', Validators.compose([ Validators.required, Validators.email ])] });

Para q funcione el formulario reactivo tienen q agregar al app.module esto:

import { FormsModule, ReactiveFormsModule } from '@angular/forms'

y esto:

@NgModule({
	declarations: [AppComponent],
	entryComponents: [],
	imports: [
		BrowserModule,
		IonicModule.forRoot(),
		AppRoutingModule,
		IonicStorageModule.forRoot(),
		**FormsModule,
		ReactiveFormsModule,**
	],
	providers: [StatusBar, SplashScreen, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
	bootstrap: [AppComponent],
})
export class AppModule {}

Luego en el “archivo.module.ts” donde archivo es el nombre de tu page coloca agrega ReactiveFormsModule en tu import

Espero sea de ayuda…