# 鉁ˋvanzado #1 - Formularios Reactivos - Deja tu comentario 馃挰
## 馃挕 Introducci贸n 馃挕
En este desaf铆o crearemos un formulario aplicando algunos conceptos b谩sicos de Angular, los cuales hemos aprendido en los desaf铆os anteriores y aprenderemos algunos nuevos a trav茅s de esta nueva aplicaci贸n 馃
**隆**[**Aqu铆 puedes encontrar el demo**](https://comments-form1.stackblitz.io)**!**
驴Est谩s list@?
**Es hora de la Acci贸n!!! 馃槤**
## Paso 1: **Creemos nuestra App de Angular** 猸愶笍
Primero iremos a el inicio de [**www.stackblitz.com**](https://stackblitz.com) y crearemos una App de Angular.
En la parte izquierda donde dice "Files", seleccionaremos el archivo llamado **app.component.html**.
Dentro del archivo seleccionamos su texto, lo borramos (presionando la tecla delete de tu compu 馃捇) y guardamos los cambios, seleccionando en la parte superior la opci贸n de '**Save**' 馃捑 o la tecla r谩pida **cmd** + **S** o en windows **Ctrl** + **S.**
## Paso 2: **A帽adamos un t铆tulo** 馃弫
En el mismo archivo **app.component.html,** vamos a usar unas etiquetas o tags de **HTML** para poner un t铆tulo.
Copiaremos lo siguiente en el archivo **app.component.html**
{% code title="app.component.html" %}
```markup
馃挰 Deja tu comentario 馃挰
```
{% endcode %}
Deber铆as ver algo as铆: 馃憞
## Paso 3: A帽adamos algunos campos de texto
Creemos un componente form y en el a帽adiremos algunos campos de texto para nuestro formulario.
En la carpeta app daremos clic derecho, seleccionamos la opci贸n Angular Generator y seleccionamos component, le asignaremos el nombre form.
En nuestro nuevo componente vamos a crear un campo de texto para el nombre, pa铆s de origen, correo y comentarios.
Incluiremos este componente form en nuestro app component.
## Paso 4: Volvamos nuestro formulario reactivo
En el **app.module.ts** debemos incluir el modulo **ReactiveFormsModule.**
```typescript
import { ReactiveFormsModule } from '@angular/forms';
```
Lo incluimos en los imports del @NgModule.
```typescript
imports: [BrowserModule, ReactiveFormsModule]
```
{% hint style="info" %}
Los formularios Reactivos nos permiten crear un modelo de formulario donde queda almacenada nuestra informaci贸n, hasta que el usuario presione el bot贸n de enviar el formulario.
Para crear el modelo se usa una clase llamada **FormGroup** (que tiene un grupo de controles o **FormControl**), este realiza un seguimiento del valor, estado de cambio y validez de los datos. El encargado de crear el FormGroup es un servicio llamado **FormBuilder**
{% endhint %}
Ahora vamos a incluir en nuestro formulario al **FormGroup** y al **FormBuilder**.
En el archivo **form.component.ts** vamos a declarar una variable de tipo **FormGroup**.
```typescript
public formGroup: FormGroup;
```
Debemos importar la clase y los dem谩s elementos que usaremos para nuestro formulario que nos permitir谩n controlarlo. En nuestro **form.component.ts** a帽adiremos el siguiente import:
```typescript
import { FormControl, FormGroup, FormBuilder } from '@angular/forms'
```
Vamos a incluir algunas funciones e incluiremos el **constructor** y el **ngOnInit** que hacen parte del ciclo de vida de Angular.
En el **constructor** vamos a definir una variable de tipo **FormBuilder**.
```typescript
constructor( private formBuilder: FormBuilder ) { }
```
En nuestro **ngOnInit** invocaremos una funci贸n que ser谩 la encargada de crear el modelo de nuestro formulario. Eso lo incluiremos en nuestro **form.component.ts**.
```typescript
public ngOnInit() {
this.buildForm();
}
private buildForm(){
this.formGroup = this.formBuilder.group({});
}
```
Dentro del objeto **group** debemos definir los valores, un nombre y una configuraci贸n en el caso de que deseemos definir valores requeridos, para la validaci贸n. Entonces procederemos a darle un valor a cada elementos que ser谩 el nombre que usaremos en cada uno de los elementos de nuestro formulario.
En nuestra funci贸n **buildForm(),** definiremos los nombres y pongamos algunos valores por defecto.
```typescript
private buildForm(){
this.formGroup = this.formBuilder.group({
name: 'Jhon Doe',
email: 'defaul@email.com',
country: 'Colombia',
comments: ''
});
}
```
Ahora en la vista en nuestro **form.component.html** vamos a asignar los nombres que definimos en el modelo, a los elementos correspondientes del **HTML**.
En el form procederemos a a帽adir las dos directivas que vienen del modulo de formularios reactivos, **\[formGroup]="objetoFormulario"** y **formControlName="nombreDelControl"**.
En nuestra etiqueta form incluiremos la directiva **\[formGroup]**.
```markup
```
En nuestros elementos del form: \ \