Intermedio #2: Crea un formulario de contacto ✉️
En este ejercicio nos vamos a divertir aprendiendo sobre Formularios de tipo Template-driven en Angular.io 📝
💡 Introducción 💡
En este desafío vamos a mostrar de forma muy creativa datos que tú mismo vas a ingresar en un formulario de contacto, la cual es una funcionalidad básica de las páginas web. 📬
¡Aquí puedes encontrar el demo!
Paso 1: Creemos nuestra App de Angular 🅰️
Entra a www.stackblitz.com, y verás algo como esto:


Paso 2: Vamos a la estructura básica HTML 💀
Vamos a adicionar la estructura básica que va a tener nuestro formulario para que tengamos mucho mas claro como vamos a visualizar nuestros datos. Reemplazaremos el contenido del archivo app.component.html y adicionaremos lo siguiente:
<div class="center">
<div class="card">
<div class="additional">
<div class="user-card">
<div class="level center">
She Codes Angular
</div>
<div class="logo-container">
<div class="logo">
<img src="https://pbs.twimg.com/profile_images/1106680001368346625/uKM4e-br_400x400.png">
</div>
</div>
<div class="points center">
@SheCodesAngular
</div>
</div>
<div class="more-info">
<!-- TODO: Aquí adicionaremos nuestro formulario -->
</div>
</div>
<div class="general more-info">
<!-- TODO: Aquí adicionaremos el resultado de los datos que ingresemos al formulario -->
</div>
</div>
</div>
Deberías hacer algo así, y tu resultado se deberá ver así:👇

Paso 3: Dale personalidad y color a nuestra aplicación 🎨
Vamos a hacer algo diferente esta vez, siempre dejamos la estructura CSS para el final, pero en esta ocasión vamos a dejarla lista y nos enfocaremos en la lógica de nuestro formulario de contacto. Reemplazaremos el contenido del archivo styles.css y adicionaremos lo siguiente:
/* Add application styles & imports to this file! */
@import url('https://fonts.googleapis.com/css?family=Abel');
html, body {
background: #FCEEB5;
font-family: Abel, Arial, Verdana, sans-serif;
}
.center {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
}
.logo-container {
left: 29px;
position: absolute;
top: 75px;
}
.logo-container img {
width: 85%;
height: auto;
border-radius: 50%;
}
.card {
width: 450px;
height: 250px;
background-color: #fff;
background: linear-gradient(#f8f8f8, #fff);
box-shadow: 0 8px 16px -8px rgba(0,0,0,0.4);
border-radius: 6px;
overflow: hidden;
position: relative;
margin: 1.5rem;
}
.card h1 {
text-align: center;
}
.card .additional {
position: absolute;
width: 150px;
height: 100%;
background: linear-gradient(#dE685E, #EE786E);
transition: width 0.4s;
overflow: hidden;
z-index: 2;
}
.card:hover .additional {
width: 100%;
border-radius: 0 5px 5px 0;
}
.card .additional .user-card {
width: 150px;
height: 100%;
position: relative;
float: left;
}
.card .additional .user-card::after {
content: "";
display: block;
position: absolute;
top: 10%;
right: -2px;
height: 80%;
border-left: 2px solid rgba(0,0,0,0.025);
}
.card .additional .user-card .level,
.card .additional .user-card .points {
top: 15%;
color: #fff;
font-size: 0.75em;
font-weight: bold;
background: rgba(0,0,0,0.15);
padding: 0.125rem 0.75rem;
border-radius: 100px;
white-space: nowrap;
}
.card .additional .user-card .points {
top: 85%;
}
.card .additional .more-info {
width: 300px;
float: left;
position: absolute;
left: 150px;
height: 100%;
}
.card .additional .more-info h1 {
color: #fff;
margin-bottom: 0;
}
.card .additional .coords {
margin: 0 1rem;
color: #fff;
font-size: 1rem;
}
.card .additional .coords .strong {
font-weight:bold;
}
.card .general {
width: 300px;
height: 100%;
position: absolute;
top: 0;
right: 0;
z-index: 1;
box-sizing: border-box;
padding: 1rem;
padding-top: 0;
}
.card .general .more {
position: absolute;
bottom: 1rem;
right: 1rem;
font-size: 0.9em;
}
.margin-left {
margin-left: 40px;
}
Deberías hacer algo así, y tu resultado se deberá ver así:👇

Paso 3: Aprendamos a hacer un formulario en Angular.io 📝🅰️
Ya tienes la estructura básica, hora nos concentraremos en la creación de un formulario, este formulario tendrá 3 campos, un campo para ingresar tu nombre, otro para ingresar tu correo electrónico y un campo para ingresar un mensaje.
Adicionaremos el siguiente contenido reemplazando la línea de comentario <!-- TODO: Aquí adicionaremos nuestro formulario -->
en el archivo app.component.html.
<form #contactForm="ngForm" (ngSubmit)="onSubmit(contactForm.value)">
<div class="form-group">
<input type="text" placeholder="What is your name?" clas="form-control" name="name" [(ngModel)]="name" required/>
</div>
<div class="form-group">
<input name="emailaddress" placeholder="What is your email?*" class="form-control" type="email" name="email" [(ngModel)]="email" required/>
</div>
<div class="form-group">
<textarea rows="4" cols="40" placeholder="Please enter your message*" class="form-control" name="message" [(ngModel)]="message" required></textarea>
</div>
<button type="submit" class="btn btn-primary" [disabled]="!contactForm.valid">Submit</button>
</form>
Deberías hacer algo así, y tu resultado se deberá ver así cuando pases el mouse sobre la aplicación:👇

En el paso 4 explicaremos:
[disabled]
[(ngModel)]
Paso 4: Vamos a visualizar los datos 👀
Ya aprendiste a hacer un formulario 🎉, ahora vamos a comprender cómo ver esa información.
Adicionaremos el siguiente contenido reemplazando la línea de comentario <!-- TODO: Aquí adicionaremos el resultado de los datos que ingresemos al formulario -->
en el archivo app.component.html.
<h1>Result Contact us</h1>
<div class="coords">
<span class="strong">Name: </span>
<span>{{contactForm.value.name}}</span>
</div>
<div class="coords">
<span class="strong">Email: </span>
<span>{{contactForm.value.email}}</span>
</div>
<div class="coords">
<span class="strong">Message: </span>
<span>{{contactForm.value.message}}</span>
</div>
<span class="more">Mouse over the card for more info</span>

Paso 5: Vamos a "guardar" datos 💾
Podemos ver todas las ventajas que tiene Template-driven y vamos a ver las pocas lineas de código que vamos a necesitar para guardar nuestros datos. Copiaremos lo siguiente en el archivo app.component.ts.
onSubmit(value: any){
console.log('Save: ', value);
}
Deberías hacer algo así, y tu resultado se deberá ver así:👇

🎉 ¡LO LOGRASTE! 🎉
😎 Tu Misión 😎
Con lo que aprendiste en el ejercicio de hoy, crea un nuevo botón que te permita llenar la información en el formulario con solo un clic, (aquí un pastelito),:
Deberás tener 3 variables, una name, otra email y otra message.
Deberás crear una función que responda al evento del botón llenando los valores de las variables.
Esta adición es para retar tu curiosidad, podrías proponer la solución que tú quieras.
Has completado Crea un formulario de contacto ✉️ ahora vamos para nuestro siguiente desafío 👇
Last updated
Was this helpful?