Resumen: en este post te mostraré un ejemplo simple de un formulario con Angular, en donde ligamos a un valor del componente con la vista del formulario.
En Angular existen dos tipos de formularios, los que son formularios reactivos (Reactive form) y los que son basados en plantillas (Template driven forms).
Hoy veremos un ejemplo de un Template driven form en Angular, que si vienes de AngularJS (o apenas estás comenzando) vas a entenderlo muy bien.
Si quieres puedes probar el resultado final aquí, y ver el código de todo el proyecto aquí.
Ejemplo de formulario basado en plantilla con Angular
En app.module.ts debes importar FormsModule, debe quedar algo así:
En la mayoría de ocasiones ya estará importado, pero puede que no, así que lo indico así.
La clase ligada al formulario
Por buenas prácticas primero vamos a definir una clase de lo que se trate nuestro formulario. En este caso vamos a registrar una mascota, así que la clase queda así:
Esa clase estará ligada al formulario más tarde. Así que creamos nuestro componente de formulario, si usas la Angular CLI sería:
ng g component formulario-mascota
El componente de TypeScript
Comenzamos viendo la lógica, el componente queda así:
Importamos la clase Mascota en la línea 2, después creamos una instancia de la clase y la llamamos mascotaModel, por defecto es una clase con datos vacíos.
Después, en la línea 17 definimos una función (formularioEnviado); esta será llamada al enviar el formulario. Presta atención a la misma.
La vista o plantilla del formulario en Angular
Ahora definimos nuestra plantilla. Es tan simple como definir un form y luego colocar dentro varios input o textarea. Además, debemos colocar un botón que envía el formulario, es decir, uno de tipo submit.
Es importante mencionar que el evento por defecto será detenido, es decir, el formulario no se enviará, sino que se llamará al método definido.
Comenzamos viendo la línea 4, definimos el form y tenemos el ngSubmit, que invocará a formularioEnviado (la función que definimos con TypeScript)
También tenemos un #formularioMascota indicando con la directiva ngForm, esto no lo usaremos por el momento pero puede que en un futuro sí.
Ahora viene otra cosa importante, cada input debe tener un name, y en ngModel ligamos el modelo con una propiedad del objeto de la clase Mascota.
Poniendo todo junto
Con eso ya tenemos nuestro formulario funcionando. Aquí un ejemplo de cómo se ejecuta:
Siguientes pasos
Ahora podrías enviar este formulario a un servidor, usando un servicio con el módulo HTTP. Si quieres un ejemplo puedes ver aquí uno con PHP.
No lo olvides… puedes probar el ejemplo aquí, y ver el código aquí.
