Formularios

Introducción

Un formulario es un elemento HTML aparentemente simple. Sin embargo, por definición, contiene elementos de entrada y el usuario puede ingresar valores correctos e incorrectos. El desarrollador deberá verificar, validar y actuar de acuerdo con lo que el usuario haya escrito o verificado.

Con JavaScript, los formularios se «han vuelto» inteligentes. Se adaptan a las reacciones de los usuarios en tiempo real. Por ejemplo, el botón utilizado para validar el formulario permanece en gris hasta que el usuario ha marcado la casilla para aceptar las condiciones generales de uso de un sitio web.

La plantilla recupera los datos, la clase TypeScript los maneja y un servicio enviará los datos a una base de datos o una API.

Crear un formulario HTML

Por supuesto, la creación de un formulario Angular comienza con la creación de un formulario HTML.

ng generate component components/c13

Aquí, un campo de tipo de texto, una lista de selección y una casilla de verificación permitirán el estudio de los componentes más utilizados de un formulario en la Web.

<!-- C:\JavaScriptYAngular\Angular\miProyectoAngular\src\app\  
components\c13\c13.component.html -->  
<div class="container text-center">  
   <h2>El componenteC13</h2>  
   <hr />  
   <div class="row justify-content-md-center">  
       <div>  
           <form method="post">  
               <div class="form-group">  
                   <label>Nombre : </label>  
                   <input type="text" class="form-control">  
               </div>  
               <div class="form-group">  
           ...

Crear un formulario Angular

Angular ofrece dos formas de escribir un formulario.

La primera es configurar todos los campos en una plantilla. Este método es, en gran medida, suficiente para un formulario simple que requiere poco control.
El segundo es describir el formulario en una clase de TypeScript y dejar que Angular lo genere.

Más simple, el primer método crea el formulario en la plantilla usando directivas y elementos HTML, mientras que el segundo usa código TypeScript. Ninguno es mejor que el otro; es la necesidad la que dicta el método. Cuando es necesario imponer múltiples validaciones a los datos ingresados, el segundo método puede ser mejor.

1. Método 1: dentro de una plantilla

Con este método, casi todo el formulario estará contenido en la plantilla del componente.

a. FormsModule

El formulario anterior solo está en HTML. Angular tiene un módulo llamado FormsModule que facilita la interacción con HTML. Gracias a él, se pueden agregar y usar varias directivas útiles.

Para implementar el uso de este módulo en todo el proyecto de Angular, es necesario importarlo. Dado que este módulo se utilizará globalmente, es la clase TypeScript app-module la que se encargará de ello.

// C:\JavaScriptYAngular\Angular\miProyectoAngular\src\app\  
app-module.ts  
import {BrowserModule} from '@angular/platform-browser';  
import {NgModule} from '@angular/core';  
  
import {AppRoutingModule} from './app-routing.module';  
import {AppComponent} from './app.component';  
  
import {FormsModule} from '@angular/forms';  
import { C13Component } from './components/c13/c13.component';  
  
@NgModule({  
 declarations: [  
   AppComponent,  
   C13Component  
 ],  
 imports: [  
   BrowserModule,  
   AppRoutingModule,  
   FormsModule  
 ],  
 providers: [],  
 bootstrap: [AppComponent]  
})  
export class AppModule {  
}

Este módulo permite utilizar...

Enviar un formulario

Dado que el formulario es administrado por Angular y ya no está en HTML, el desarrollador debe modificar el comportamiento natural del formulario y su botón submit.

Para hacer esto, simplemente agregue una directiva al elemento HTML del formulario a fin de pedirle que ejecute una función de JavaScript al hacer clic en el botón Enviar.

<form (ngSubmit)="miFuncion()">

<!-- C:\JavaScriptYAngular\Angular\miProyectoAngular\src\app\  
components\c13\c13.component.html -->  
<div class="container text-center">  
   <h2>El componenteC13</h2>  
   <hr />  
   <div class="row justify-content-md-center">  
       <div>  
           <form [formGroup]="MiFormulario"  
(ngSubmit)="Clic(MiFormulario.value)">  
               <div class="form-group">  
                   <label>Nombre : </label>  
                   <input type="text" class="form-control"  
name="nombre"formControlName="nombre">  
     ...

Práctica

1. Enunciado

Desde la aplicación PokemonManager desarrollada en los capítulos anteriores, agregue un formulario de búsqueda en la plantilla de pokemons.

El input le permite escribir el nombre de un Pokémon y la aplicación cambiará la vista en función del resultado.

Utilice un modelo y un formulario basados en las plantillas.

Al hacer clic en el botón Buscar, cambia el DOM, mostrando solo el Pokémon que estás buscando si existe. De lo contrario, un mensaje advertirá de ello al usuario.

Al hacer clic en el botón Cancelar, se restablece el campo de entrada y se muestran todos los Pokémon de la base de datos nuevamente.

Usando un formulario de búsqueda para mostrar solo Ivysaur

Para ir más allá, use expresiones regulares. El DOM se cambia después de cada pulsación de tecla. El botón de búsqueda se vuelve innecesario.

2. Corrección

El campo de entrada es un formulario que contiene solo un atributo: el nombre del Pokémon buscado.

Angular CLI facilita la creación de este formulario, basado en un modelo TypeScript.

ng generate class models/formBuscarPokemon

Después:

// C:\PokemonManager\src\app\modeles/form-buscar-pokemon.ts  
export class FormBuscarPokemon {  
  
   // Nombre del Pokémon buscado  
   nombre: string;  
  
   constructor(nombre: string) {  
       this. nombre = nombre;  
   }  
  
   setNombre(nombre: string) {  
       this. nombre = nombre;  
   }  
  
}

Agregar este formulario a la plantilla es simplemente crear un formulario HTML que contiene un campo de entrada. Este está vinculado al modelo creado anteriormente gracias a la directiva NgModel.

A los dos botones hay métodos JavaScript vinculados que luego deberán implementarse en el componente pokemons.

<form>  
  <input name="pokemonBusca" type="test" placeholder="Nombre del  
Pokémon" [(ngModel)]=" formBuscarPokemon.nombre">  
  <a...