Por si tienes alguna duda. Aquí te explicamos cómo funciona: 👷‍♀️ 1. En Angular.io existen 2 tipos de Formularios Template-driven y Reactive Forms, en esta oportunidad trabajaremos con los formularios tipo Template-driven. su diferencia radica en el tipo de aplicaciones que necesites crear, para formularios simples y sin lógica personalizadas, esta es tu mejor opción, cuando necesitas validaciones personalizadas o creación de campos que aparezcan dinámicamente Reactive Forms es tu mejor opción. 2. En nuestro código HTML tenemos una nueva etiquetaformque contendrá nuestro formulario. 3. En nuestro código HTML tenemoscontactForm="ngForm", que es la referencia a nuestro formulario, en Angular se llama Template reference, y básicamente nos ayuda a potenciar una simple etiqueta HTML form con todo el poder que tienen Angular para ofrecernos. el NgForm le da propiedades como validación o poner el campo como requerido y muchísimas más funcionalidades con lógica sin necesidad de tanto código. 4. En nuestro código HTML tenemos (ngSubmit)="onSubmit(contactForm.value):Con él(ngSubmit) estamos usando un evento para hacer acceder a nuestra función onSubmit() que va a contener la información de los valores contactForm.value que son nuestros datos del formulario en el momento que le demos click a el botón de guardar los datos del formulario. (aun que no los estemos guardando en ninguna base de datos realmente) 5. En nuestro código HTML tenemos una nueva etiqueta input esta etiqueta nos ayudara a ingresar información a nuestro formulario, en nuestro caso, los campos name y email tienen la etiqueta input que nos permitirá tener control sobre la información ingresada. 6. En nuestro código HTML tenemos una nueva etiqueta textarea esta etiqueta nos ayuda ingresando información a nuestro formulario que podría ser de más de una línea, se usa generalmente para párrafos. Nosotros lo usamos para el campo message textarea. 7. En nuestro código HTML tenemos una nueva etiqueta required esta etiqueta es lógica de los formularios de Angular.io tipo template-driven, al incluir esta etiqueta le estamos diciendo a angular que ese campo es un campo requerido y que lo necesitamos lleno para el correcto envío de información cuando presionemos el botón guardar. 8. En nuestro código HTML tenemos una nueva etiqueta placeholder será la encargada de poner un texto dentro del campo (input, o textarea) cuando este vacío, se usa para especificar una pista breve que describe el valor que esperamos que ingrese el usuario. 9. En nuestro código HTML tenemos una nueva etiqueta button que define un botón en el que se puede hacer clic.

En el paso 4 explicaremos:

app.component.html
[disabled]
[(ngModel)]

Por si tienes alguna duda. Aquí te explicamos cómo funciona: 👷‍♀️ 1. Recuerdas que en el paso anterior teníamos en nuestro HTML:

app.component.html
#contactForm="ngForm"

Bueno, contactForm es nuestra referencia a nuestro formulario, entonces gracias a que es un Angular template-driven form, podemos usar la referencia al contenido de sus campos sin adicionar variables o código adicional en nuestro archivo .ts, directamente desde nuestro HTML podemos acceder a ella. 2. Por lo explicado en el paso anterior, podemos hacer un binding (una visualización de variable) usando nuestros conocidos {{}} y nuestro contactForm de referencia, haciendo muy fácil mostrar el nombre, que ingresamos de la siguiente manera:

app.component.html
{{contactForm.value.name}}

Lo mismo lo hacemos con los demás campos:

app.component.html
{{contactForm.value.email}}
{{contactForm.value.message}}

3. Recuerdas la etiqueta [(ngModel)]="name" en nuestro código HTML, esto, combinado con los puntos 1 y 2, hacen la magia del binding (una visualización de variable), cuando usamos [(ngModel)] es dos vías de binding, en inglés, two-way data binding para asignar el nombre, incluso podemos crear una variable con el mismo nombre "name" y asignarle un valor por defecto para cuando cargue nuestro formulario. 4. Recuerdas la etiqueta [disabled] del punto:

app.component.html
[disabled]="!contactForm.valid"

contactForm.valid: Es el uso de la referencia del template-driven form para acceder a las propiedades, lo que declaramos como nuestro contactForm puede acceder a la propiedad que le dice si es valid. Lo que lo hace valido o invalido es que cuando adicionamos la etiqueta required en el paso 3, le estamos diciendo a nuestro formulario que hasta que ese campo no este lleno, el formulario no sera válido, por lo tanto, debe tener el contenido de los 3 campos de nuestro formulario. [disabled]: Le estamos indicando que cuando la condición interna no se cumpla, me des habilite el botón, vamos a inhabilitar el botón, mientras el formulario no sea valido.

Por si tienes alguna duda. Aquí te explicamos cómo funciona: 👷‍♀️ 1. Recuerdas que en el paso 3 te contamos sobre el botón para guardar nuestro formulario, bueno, necesitamos crear una función que va a recibir toda la información que ingresemos en él. la llamamos onSubmit y adicionamos la función console.log para ver los datos que queremos "almacenar" en consola.

​Aquí puedes encontrar el ejercicio resuelto.

Has completado Crea un formulario de contacto ✉️ ahora vamos para nuestro siguiente desafío 👇

Nota:

Si necesitas ayuda con este ejercicio puedes contactar a:

Alejandra Giraldo Twitter: @maleja111 Correo: [email protected]