Scroll Infinito con Angular 6 y Firestore
Scroll Infinito con Angular 6 y Firestore


Este tutorial es una Introducción a formularios en Angular 5 y está pensado para usuarios que se estén iniciando en este Framework Javascript.

Para este ejemplo vamos a desarrollar un formulario de Login utilizando varias clases de Angular 5, entre ellas FormGroup, FormBuilder y Validators, que son las clases más utilizadas al crear formularios Reactivos.

  • FormGroup: realiza el seguimiento del valor y el estado de validación de un control de formulario individual, en nuestro caso lo aplicaremos contra el formulario, así podremos controlar el email y password desde él.
  • FormBuilder: crea un AbstractControl desde la configuración que le pasemos, nosotros utilizaremos el método group el cual recibe un FormGroup.
  • Validators: por defecto trae una serie de validadores muy útiles para validar campos de formulario aunque es muy sencillo crear validadores personalizados.

Desarrollar el componente Login

Una vez sabemos cómo funcionan las clases más comunes, vamos a crear nuestro ejemplo, para ello primero vamos a crear el componente login utilizando Angular CLI con el siguiente comando.

Ahora abre el archivo login.component.ts y añade el siguiente código, el cual contiene el ejemplo completo de nuestro componente.

La propiedad loginForm de tipo FormGroup nos servirá para obtener los valores de los inputs y también para realizar la validación.

El método buildForm genera la lógica del formulario utilizando el método group de la clase FormBuilder, como puedes ver, tenemos 2 claves, email y password, que serán nuestros campos, el primer parámetro es el valor por defecto del input, y el segundo las reglas de validación.

Cuando queremos utilizar múltiples reglas en nuestra validación simplemente podemos hacer uso de Validators.compose y pasarle un array con nuestras validaciones.

Las validaciones required, email y minLength ya vienen por defecto en el sistema de validación de Angular, así que no tenemos que escribir nada.
Finalmente tenemos el método submit, que será ejecutado una vez el formulario ha sido validado, aquí podemos obtener los valores del form, cómo puedes ver es muy sencillo.

Desarrollar la template Login

Ahora vamos a abrir el archivo login.component.html y vamos a reemplazar el código por el siguiente el cual haciendo uso de la propiedad loginForm de nuestra clase será capaz de aplicar las reglas escritas.

Al abrir el form utilizamos la sintaxis [formGroup]=»loginForm», de esta forma asociamos el FormGroup a nuestro formulario.

Con (ngSubmit)=»submit()» le decimos que cuando el formulario sea ejecutado por un control de tipo submit se ejecute el método submit.

Con formControlName=»email» y formControlName=»password» asociamos las reglas del método buildForm a estos controles.

Finalmente comprobamos con loginForm.get(‘email’).errors y loginForm.get(‘password’).errors si alguno de los campos tiene errores, en caso de tenerlos los mostramos accediendo a cada error de forma personalizada.

Importar el módulo ReactiveFormsModule

Para que nuestro ejemplo finalmente funcione debemos añadir el módulo ReactiveFormsModule a la clave imports del módulo relacionado, en mi caso será el módulo auth.module.ts.

Recuerda que estamos en el cliente

Aunque las reglas de validación que hemos escrito son 100% funcionales, no olvides que todo lo que estamos escribiendo es el cliente, y cualquier usuario puede alterar lo que sucede y saltarse los controles, por ese motivo siempre debes realizar las validaciones en cliente y servidor, nunca lo olvides.

Espero que te haya parecido interesante esta introducción a formularios en Angular 5.