Tutorial 1: Formulario reactivo con Angular V17

“¡Bienvenidos a nuestra ‘Caja de Herramientas del Desarrollador’! Esta serie de artículos es una exploración en el mundo del desarrollo de software, donde cada artículo es una herramienta de conocimiento que está diseñada para elevar tus habilidades de desarrollo al siguiente nivel.”

Requisitos

Para este tutorial asegúrate de tener lo siguiente:

• Una cuenta en la plataforma de StackBlitz, la puedes obtener de forma sencilla si tienes una cuenta en GitHub.

Si quieres que agreguemos a la caja de herramientas como crear una cuenta en GitHub, solo escribeme.😉

Paso # 1

• Crea un proyecto en StackBlitz con Angular, al hacerlo se verá así:

En el panel del lado izquierdo tendrás varios archivos que son básicamente los que el proyecto te da por defecto y que causan la renderización de lo que parece al lado derecho.

Para que todo esto funcione, StackBlitz también tiene unas dependencias instaladas y son estas:

Normalmente cuando creas un proyecto con Angular desde cero y no en un editor online estas dependencias ya viene en el paquete de Angular que se llama Angular CLI

Paso # 2

Abre el archivo main.ts y exploremos lo que contiene, sigue los colores de las áreas demarcadas en la imagen:

• En el área naranja tenemos las dependencias que necesitamos para que esto funcione. 🤗

• En el área roja tenemos un decorador @Component con su respectivo témplate que es en donde haremos unos cambios en el siguiente paso.

Si quieres saber mas sobre el decorador @Component y la anatomia de un componente te dejo este enlace y me retiro lentamente 🤭 🤭 🤭

• Por último, en el área azul tenemos una clase que lo que hace es que da la lógica a nuestro código y nos deja hacer cosas como la interpolación que está en la línea 9

Paso # 3

• Quédate en este archivo main.ts y comienza hacer los cambios en el template, es decir, de línea 9 a la 12.

• Borra la línea 10, 11, y 12 de esa manera desaparecerá el link y solo te quedará la etiqueta h1 con el título.

• Copia y pega el siguiente código dentro del template:
  

<form>
  <div class="mb-3">
    <label>Nombre</label>
    <input/>
    <label>Email</label>
    <input/>
    <button>Enviar</button>
  </div>
</form>

• Agrega una línea para importar el módulo que te permite usar todos los superpoderes de Formularios reactivos.

De esa manera te podrás importar módulos que utilizaremos en el siguiente paso.

Cada vez que necesites usar una herramienta de Angular que es parte de su Core debes importarlo en el archivo de tu componente.

Paso # 4

• En la parte superior de tu código donde importaste ReactiveForms agrega FormControl de esa manera lo importaras.

• Crea una nueva instancia en tu clase App.
  

export class App {
  name = new FormControl('');
}

Ahora puedes asociarlo con tú template, ¡Hazlo en el siguiente paso!

Paso # 5

Las etiquetas de label e input necesitan ciertos atributos para usar el Formcontrol.

• Copia y pega el siguiente código:

<h1>Mi formulario reactivo con Angular!</h1>
    <form>
    <div class="mb-3">
      <label for="name">Nombre</label>
      <input id="name" type="text" placeholder="Escribe tu nombre" [formControl]="name"/>
      <pre>{{name.value | json}}</pre>

      <label for="email">Email</label>
      <input id="email" type="text" placeholder="Escribe tu email" [formControl]="name"/>
      <br>
      <button>Enviar</button>
    </div>
    </form>

La etiqueta pre nos permite visualizar que los valores ingresados en el input estan siendo registrados.

Paso # 6

Ahora debemos asegurarnos que los valores que colocamos en los inputs se guarden en memoria.

• Mediante el button guardaremos la información del formulario y lo hacemos así:

  • Convierte tu formulario en un grupo con la propiedad formGroup

• Copia y pega este código en la clase:
  
  

export class App {
  form = new FormGroup({
    name: new FormControl(''),
    email: new FormControl(''),
  });

Para que estas propiedades funcionen debes hacer algunos cambios en tu HTML de esa manera lo enlazas.

• Copia y pega este código en tú template:

<h1>Mi formulario reactivo con Angular!</h1>
    <form [formGroup]="form" (ngSubmit)="onSubmit()" >
    <div class="mb-3">
      <label for="name">Name</label>
      <input id="name" type="text" placeholder="Escribe tu nombre" formControlName="name"/>
      <br>
      <label for="email">Email</label>
      <input id="email" type="email" placeholder="Escribe tu email" formControlName="email"/>
      <br>
      <button >Enviar</button>
    </div>
    </form>

Como te puedes dar cuenta las etiquetas tienen muchos atributos que se usan para que tu logica funcione y de esa manera puedas o renderizar(mostrar) lo que quieres y que los metodos cumplan la funcion para lo que fueron creados. ¡Animate a conocer un poco mas de las etiuietas en HTML!

Paso # 7

• Ahora crea la lógica del botón mediante un método en la clase, copia y pega este código:

onSubmit() {
    console.warn(this.form.value);
  }

El console nos permite ver un mensaje de advertencia que nos muestra los datos de los inputs ingresados por los usuarios.

• Como te diste cuenta en tu código HTML anterior, la etiqueta form no solo tiene el atributo [formGroup]="form" también tiene la llamada a nuestro método (ngSubmit)="onSubmit(), sí justo el que acabaste de generar anteriormente.

Y con esto lo único que nos falta es hacer es ver nuestros datos renderizados. Quedaría algo así:

💪🏽 Waoo se ve genial verdad, capturaste los datos.

Lo que dire para finalizar este tutorial es que aprendimos bastantes conceptos así no lo parezca y que te puedes estar haciendo preguntas como:

1- Que tal si el usuario escribe algo diferente en el campo email.

Como nos aseguramos que escriba lo que deberia ir en ese campo.

2- Y si el usuario quiere volver a llenar el formulario y está lleno con los datos que escribió anteriormente.

Sí, estás totalmente en lo cierto, eso también lo podemos programar. Eso y muchas cosas más 🚀.

Quédate pendiente de mis futuros artículos que hacen parte de esta serie 🗃️ > Caja de Herramientas del Desarrollador.

Les dejo por aquí el código en la plataforma de StackBlitz y él repositorio si quieren mirarlo 👀 para guiarse.