TypeScript / Angular – forms

Bienvenidos sean a este post, hoy veremos como agregar un form.

En los servicios web el mejor metodo para enviar y recibir informacion es mediante forms, esto es usado practicamente desde sus inicios, y mediante los distintos lenguajes y framework podemos controlar sus distintas acciones. Para aplicarlo en Angular vamos a tomar el proyecto que estuvimos trabajando, sino lo poseen les dejo un link para descargarlo:

Extraigan el directorio en el PC y esta listo para ser usado. En este caso vamos a crear un form para el envio de informacion desde cada vivienda pero esta sera recibida por el log de la consola. Nuestro primer paso sera ir a viviendas.service.ts y agregaremos al final del bloque de la clase que exportamos el siguiente codigo:

  submitAplicacion(nombre: string, apellido: string, email: string) {
        console.log(`Aplicacion Casas recibio:
                Nombre: ${nombre}, Apellido: ${apellido}, e-mail: ${email}
                .`);
  }

Este sera el metodo encargado de recibir y procesar la informacion del form, y cada uno de los valores los veremos en el log de la consola. Nuestro siguiente paso sera ir a detalles.component.ts y haremos algunas modificaciones. La primera modificacion sera agregar la siguiente linea al inicio:

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

Esta nos importara todos lo necesario para poder manipular a los formularios. Nuestro siguiente paso sera importarlos en el componente para ello modifiquen la propiedad imports de @Component de la siguiente manera:

imports: [ CommonModule, ReactiveFormsModule ],

En este paso importaremos no solamente uno de los elementos de form sino tambien el common para poder manejar la informacion. Y nuestras ultimas modificaciones sera en la clase que exportamos. Lo primero sera agregar en la clase el siguiente bloque de codigo antes del constructor:

  formulario = new FormGroup({
        nombre: new FormControl(''),
        apellido: new FormControl(''),
        email: new FormControl('') });

Este objeto sera el encargado de darle forma a nuestro «formulario» mediante FormGroup que agrupara a todos los componentes del form. En cambio FormControl se encargara de los controles en el mismo y no solo lo asociara sino que tambien le asigna un valor inicial, en este caso una cadena vacia. Nuestra siguiente modificacion sera agregar el siguiente bloque de codigo pero despues del constructor:

  submitAplicacion() {
        this.servicioVivienda.submitAplicacion(
                this.formulario.value.nombre ?? '',
                this.formulario.value.apellido ?? '',
                this.formulario.value.email ?? '' );
  }

Aqui definimos un metodo que llamara al metodo que definimos al principio del post y le pasaremos los datos del formulario, Mediante el operador de coalescencia nula evitaremos que el valor sea null o undefined, hasta aca tenemos como manejar los datos del form y como lo pasamos al servicio encargado de procesarlos pero aun no podemos ingresarlos. Para ello debemos ir a detalles.component.ts y modificaremos la propiedad template de @Component de la siguiente manera:

  template: `
    <article>
        <img class="listado-foto" [src]="ubicacionViviendas?.foto"
                alt="Foto del exterior de {{ubicacionViviendas?.nombre}}">
        <section class="listado-descripcion">
          <h2 class="listado-top">{{ ubicacionViviendas?.nombre }}</h2>
          <p class="listado-ubicacion">
            {{ubicacionViviendas?.ciudad}}, {{ubicacionViviendas?.pcia}}
          </p>
        </section>
        <section class="listado-caract">
          <h2 class="listado-top">Acerca de esta vivienda</h2>
          <ul>
                <li>Posse Wi-Fi: {{ubicacionViviendas?.wifi}}</li>
          </ul>
        </section>
        <section class="listado-apply">
          <h2 class="listado-top">Aplica para vivir aqui:</h2>
          <form [formGroup]="formulario" (submit)="submitAplicacion()">
                <label for="nombre">Nombre</label>
                <input id="nombre" type="text" formControlName="nombre">
                <label for="apellido">Apellido</label>
                <input id="apellido" type="text" formControlName="apellido">
                <label for="email">E-mail</label>
                <input id="email" type="text" formControlName="email">
                <button type="submit" class="primary">Aplicar</button>
          </form>
        </section>
     </article>
  `,

En este caso solamente agregamos una nueva seccion a la cual le aplicamos la clase listado-apply. Este contendra el form con el atributo de formGroup para indicar que agrupara a todos los elementos del formulario. En este agregaremos tres input con sus respectivos label donde almacenaremos los tres valores que luego enviaremos. Y tambien tendremos un boton para «submitir» el form. Con esto tenemos todo listo para probarlo y para ello les dejo el siguiente video

Como pueden ver envio los datos y en el log de la consola en el browser se ven perfectamente. Antes de finalizar les dejo un link para descargar los archivos del proyectos y los modificados en este post:

En resumen, hoy hemos visto forms, como se utilizan, como se aplican, y un ejemplo practico para ver como se cargan datos y se envian, espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.