Formularios con Angular 2

Publicado en Sep 17, 2016

Veamos como usar los formularios con Angular 2 (última actualización). Vamos directos a la práctica.

Para poder utilizar los formularios con Angular 2 primero tenemos que cargar el modulo Forms de Angular.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

// Importamos el módulo de formularios
import { FormsModule }   from '@angular/forms';

// Importar componente principal
import { AppComponent }  from './app.component';

// Cargamos módulos, componentes, directivas, etc.
@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Ahora vamos a crear nuestro componente y nuestro formulario en la vista del componente. Vamos a tener un array de categorías y un objeto json pelicula. Y un par de flags para mostrar unas cosas u otras en la plantilla según corresponda.

import { Component } from '@angular/core';

@Component({
  selector: 'mi-formulario',
  templateUrl: 'app/views/mi-formulario.component.html'
})

export class MiFormularioComponent {
  public submitted = false;
  public active = true;

  public categorias = ['Acción', 'Terror', 'Comedia', 'Aventura'];
  public pelicula = {'titulo':'', 'categoria':''};

  onSubmit() { this.submitted = true; }

 
  limpiar() {
    this.pelicula = {'titulo':'', 'categoria':''};
    this.active = false;
    setTimeout(() => this.active = true, 0);
  }
}

Ahora creamos nuestra plantilla donde definiremos el formulario. Al cual le pondremos un nombre y haremos lo habitual, trabajaremos con el Two-way databinding, etc.

<div class="container">
  <div  [hidden]="submitted">
    <h1>Formulario de pelicula</h1>

    <form *ngIf="active" (ngSubmit)="onSubmit()" #peliculaForm="ngForm">
      <div class="form-group">

        <label for="name">Titulo</label>
        <input type="text" class="form-control" id="titulo"
               required
               [(ngModel)]="pelicula.titulo" name="titulo"
               #titulo="ngModel" >
        <div [hidden]="titulo.valid || titulo.pristine" 
             class="alert alert-danger">
          Titulo es necesario
        </div>
      </div>

      <div class="form-group">
        <label for="power">Categoría</label>
        <select class="form-control" id="categoria"
                required
                [(ngModel)]="pelicula.categoria" name="categoria" 
                #categoria="ngModel" >
          <option *ngFor="let cat of categorias" [value]="cat">{{cat}}</option>
        </select>
        <div [hidden]="categoria.valid || categoria.pristine" class="alert alert-danger">
          Categoria requerida
        </div>
      </div>
      <button type="submit" class="btn btn-default" [disabled]="!peliculaForm.form.valid">Submit</button>
      <button type="button" class="btn btn-default" (click)="limpiar()">Limpiar</button>
    </form>
  </div>

  <div [hidden]="!submitted">
    <h2>Datos enviados:</h2>
    <div class="row">
      <div class="col-xs-3">Titulo:</div>
      <div class="col-xs-9  pull-left">{{ pelicula.titulo }}</div>
    </div>
    <div class="row">
      <div class="col-xs-3">Categoria:</div>
      <div class="col-xs-9 pull-left">{{ pelicula.categoria }}</div>
    </div>
    <br>
    <button class="btn btn-default" (click)="submitted=false">Edit</button>
  </div>

</div>

Ahora utilizamos el componente que hemos creado en nuestro app.component.ts

// Importar el núcleo de Angular
import {Component} from '@angular/core';
import {MiFormularioComponent} from './components/mi-formulario.component';
 
// Decorador component, indicamos en que etiqueta se va a cargar la plantilla
@Component({
    selector: 'my-app',
    template: '<h1>Hola mundo con Angular 2 !! victorroblesweb.es</h1> <mi-formulario></mi-formulario>',
    directives: [MiFormularioComponent]
})
 
// Clase del componente donde irán los datos y funcionalidades
export class AppComponent { }

Con esto ya hemos visto un ejemplo de trabajo con los formularios de Angular 2. Échale un vistazo a este otro articulo que publiqué acerca del uso de los formularios con Angular 2 en el que también vemos la validación, etc. Y si quieres realmente aprender 100% como desarrollar webapps con Angular 2, accede a mi curso de casi 9 horas en video.

Esto es todo por hoy. Gracias 😀