<!-- TODO: Aquí adicionaremos nuestro formulario -->
en el archivo app.component.html.form
que 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.<!-- TODO: Aquí adicionaremos el resultado de los datos que ingresemos al formulario -->
en el archivo app.component.html.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: [(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:onSubmit
y adicionamos la función console.log para ver los datos que queremos "almacenar" en consola.