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í:

See the gist on github.

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í:

See the gist on github.

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í:

See the gist on github.

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.

See the gist on github.

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í.