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

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';// <---- Importar FormsModule

import { AppComponent } from './app.component';
import { FormularioMascotaComponent } from './formulario-mascota/formulario-mascota.component';

@NgModule({
  imports:      [ BrowserModule, /*Importante importar FormsModule -->*/FormsModule ],
  declarations: [ AppComponent, FormularioMascotaComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

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

export class Mascota {
  constructor(
        public nombre: string,
        public raza: string,
        public edad: number
    ) { }
}

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

import { Component, OnInit } from "@angular/core";
import { Mascota } from "../mascota";

@Component({
  selector: "app-formulario-mascota",
  templateUrl: "./formulario-mascota.component.html",
  styleUrls: ["./formulario-mascota.component.css"]
})
export class FormularioMascotaComponent implements OnInit {
  // El modelo ligado al formulario, por defecto vacío
  mascotaModel = new Mascota("", "", undefined);

  constructor() {}

  ngOnInit() {}

  formularioEnviado(){
    /*
    Aquí el formulario ha sido enviado, ya sea
    por presionar el botón, presionar Enter, etcétera
    */    console.log("El formulario fue enviado y la mascota es: ", this.mascotaModel)
    alert("Enviado");
  }
}

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.

<h1>Registrar mascota</h1>
<a href="//parzibyte.me/blog">By Parzibyte</a>
<br><br>
<form #formularioMascota="ngForm" (ngSubmit)="formularioEnviado()">
 <input type="text" name="nombre" placeholder="Nombre de mascota" [(ngModel)]="mascotaModel.nombre">
 <br><br>
 <input type="text" name="raza" placeholder="Raza de mascota" [(ngModel)]="mascotaModel.raza">
 <br><br>
 <input type="number" name="edad" placeholder="Edad de mascota" [(ngModel)]="mascotaModel.edad">
 <br><br>
 <button type="submit">Guardar</button>
</form>

<h2>Depurando mascota:</h2>
{{ mascotaModel | json }}

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