Ediciones ENI Editorial | líder en informática
Los formularios
Los formularios basados en un template
El objetivo de un formulario es aportar una experiencia agradable y llena de cohesión cuando el usuario interactúa con los datos de la aplicación.
Con Angular, es posible crear formularios con controles de usuario que van a utilizar el data binding (relación de datos). Este data binding va a permitir sincronizar los datos entre los componentes y las vistas. La modificación de una propiedad de un componente, se reflejará automáticamente en la interfaz, e inversamente una modificación de un control HTML actualizará las propiedades del componente.
Además, el desarrollador tiene las herramientas para detectar estos cambios de estado, y será incluso más fácil gestionar la validación de las entradas de usuario y por lo tanto, visualizar los errores, o no, en consecuencia.
Todo desarrollador web ya ha tenido la oportunidad de desarrollar un formulario, ya se trate de una página de login, un formulario de contacto o un CRUD (Create, Read, Update, Delete) de una entidad de un backend.
En este capítulo, el objetivo es abordar los diferentes problemas durante el desarrollo de un componente de formulario, usando toda la potencia que aporta Angular para estos problemas.
A continuación en el capítulo, el formulario permitirá la edición de una entidad de tipo Product, con las siguientes propiedades:
export...Crear un componente de formulario
1. El componente
Como un componente clásico, un componente formulario contiene dos partes. La primera es la vista, que se compone del template HTML y del estilo CSS, la segunda es el código en sí mismo. Este código va a gestionar los datos y las interacciones del usuario.
Por lo tanto, la creación del formulario es idéntica a cualquier componente Angular. En lo que afecta a las importaciones, es necesario importar el decorador Component que viene de @angular-core, y después la clase o interfaz que representa el dato a manipular en el formulario.
import { Component } from '@angular/core';
import { Product } from './product'; La declaración del componente en sí mismo es muy básica. Para este ejemplo, la vista HTML y el estilo CSS están en archivos separados:
@Component({
selector: 'app-product-form',
templateUrl: './product-form.component.html',
styleUrls: ['./product-form.component.css']
}) Para terminar, el contenido de la clase consiste en la recuperación de una instancia de nuestro producto a modificar. En este ejemplo, instanciamos un producto en duro. Más tarde, el objetivo será proporcionarlo como argumento del componente.
export class ProductFormComponent implements OnInit {
categories = ["Verduras", "Frutas", "Carnes"];
product: Product;
ngOnInit() {
this.product =
{
...Los estados y la validez de un campo
1. Los estados de un input
Utilizar ngModel aporta, además del two-way data binding, el conocimiento de los estados de un input en un instante dado.
Por ejemplo, si nunca se ha visitado un campo, es decir, si el usuario nunca ha interactuado con él, Angular va a añadir al campo la clase ng-untouched. A la inversa, si el usuario ha interactuado con el campo, se aplicará la clase ng-touched.
Si el campo es válido, está presente la clase ng-valid. Si el campo no es válido, será la clase ng-invalid.
La noción de validez se aborda más tarde en el capítulo.
Para terminar, Angular añade también una gestión del "dirty", es decir que además de la validez y la noción de "touched", la aplicación sabe si el campo "touched" o "untouched" se ha modificado. Cuando se modifica el campo, se aplica la clase ng-dirty. De lo contrario, se aplica la clase ng-pristine.
A continuación se muestra un tabla que resume esta información:
|
Condición |
Clase si la condición es verdadera |
Clase si la condición es falsa |
|
El campo es válido |
ng-valid |
ng-invalid |
|
El campo se modifica |
ng-dirty |
ng-pristine |
|
Ha habido interacción con el campo |
ng-touched |
ng-untouched |
Con el objetivo de entender bien estos diferentes estados y cómo conviven, un ejercicio interesante consiste...
Enviar el formulario
El objetivo final para el usuario es enviar el formulario cuando esté completo. Para esto, en primer lugar hay que crear un botón de tipo submit, ya hecho en el ejemplo anterior. Sin embargo, esto no es suficiente. Hay que explicarle al formulario lo que debe hacer cuando se solicita una validación. Para esto, Angular ofrece la directiva ngSubmit.
La sintaxis de la directiva es la siguiente:
<form (ngSubmit)="onSubmit()"> De esta manera, se llamará al método onSubmit cuando se envíe el formulario.
Por lo tanto, hay que añadir este método al componente:
onSubmit() {
console.log(`El producto ${this.product.name} se ha enviado.
Pertenece a la categoría ${this.product.category}`);
} En realidad, Angular añade una directiva ngForm automáticamente a las etiquetas de tipo form. Esta directiva va a contener los controles creados por las diferentes parejas de directiva ngModel y de atributo name, especificados en los campos del formulario.
La directiva ngForm posee la noción de validez a nivel del formulario. Se puede desactivar el botón submit mientras no se haya validado el formulario.
<div class="product-container">
<h1>Mi Formulario</h1>
<form (ngSubmit)="onSubmit()" #productForm="ngForm"> ...Los formularios y los FormControls
1. Los controles y los grupos de controles
Los ejemplos que se ilustran en este capítulo son muy básicos y la validación está muy resumida. Esto a menudo es apropiado a las necesidades, pero las expectativas pueden ser más complejas y es posible que sea necesaria una validación personalizada o incluso una validación asíncrona.
Los formularios Angular funcionan principalmente con dos tipos de componentes: los FormControls (controles) y los FormGroups (grupos de control).
En los ejemplos anteriores, solo ngModel se ha utilizado realmente en los formularios, y después Angular se ocupa del resto sin que el desarrollador se preocupe de ello. El objetivo de ahora en adelante es tomar el control de estas entidades de formulario y manipularlas nosotros mismos, lo que permite ir más lejos.
Los controles son entidades que tienen un valor y un estado de validez, que se determina por una función de validación que es opcional. Un control puede estar relacionado con un campo y durante su creación recibe tres argumentos, todos opcionales. El primer argumento es el valor por defecto, el segundo es un validador y el tercero también es un validador, pero asíncrono.
En primer lugar, para utilizar esta funcionalidad de Angular es necesario importar, a nivel del módulo, el ReactiveFormsModule de @angular/forms.
import { FormsModule, ReactiveFormsModule } from
'@angular/forms'; Si se importa ReactiveFormsModule, no es necesario importar FormsModule, ReactiveFormsModule importa él mismo FormsModule.
Por lo tanto, para utilizar un control hay que instanciarlo en primer lugar. Para esto, es necesario importar determinados elementos desde @angular/forms, principalmente FormControl y Validators.
import { FormControl, Validators } from '@angular/forms'; De esta manera, se puede instanciar el FormControl con la siguiente sintaxis.
this.login = new FormControl('Default value',
Validators.required); Hay que saber que los segundos y terceros argumentos, pueden ser tablas. Por lo tanto, es posible proporcionar varios validadores a su FormControl.
Angular ofrece un builder llamado FormBuilder.
import { FormBuilder } from "@angular/forms";
constructor(private fb: FormBuilder) {
const ctrl:...