Tutorial 1: Formulario reactivo con Angular V17
Tags: angularv17, formulariosreactivos, beginners, español
Published: 2023-11-29 17:50:24

---
title: Tutorial 1: Formulario reactivo con Angular V17
published: true
description: Explora en cada artículo herramientas específicas para tareas particulares, desde desarrollo front-end, backend, frameworks y más. Brindándote las claves para que sigas avanzando en tu aprendizaje.
series: Caja de Herramientas del Desarrollador
tags: angularv17, formulariosReactivos, beginner, español
cover_image: "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/50j277x778t5gjd6pjcc.png"
# Use a ratio of 100:42 for best results.
# published_at: 2023-11-23 13:09 +0000
---


“¡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](https://stackblitz.com/), la puedes obtener de forma sencilla si tienes una cuenta en [GitHub](https://github.com/).


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

### Paso # 1

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

![Poyecto stackblitz](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e80xfgfw42htud6eglgz.png)

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.

 ![Archivos generados](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/viyijfc2j671p1sui2ls.png)

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

![Dependencies](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6189ajzaw0gdzh033v5l.png)

> 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](https://angular.dev/tools/cli)

### Paso # 2

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

![main](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5vr1aezupandqnhnxk10.png)

- 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](https://angular.dev/guide/components) 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:

```html
<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.


![Imports](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3xz6rrs1bjt6tv1lsf5v.png)


> 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`.

```TypeScript
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:

```HTML
<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`:

```TypeScript
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:

```HTML
<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!](https://developer.mozilla.org/en-US/docs/Glossary/HTML5)

### Paso # 7 

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

```Typescript

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í:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k40pv5sjvgym24liprtz.png)

💪🏽 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](https://stackblitz.com/edit/stackblitz-starters-s61kff?file=src%2Fmain.ts) y él [repositorio](https://github.com/Derlys/tutorial-1-reactive-form/tree/main) si quieren mirarlo 👀 para guiarse.