Subir archivos con Angular2
Subir archivos con Angular2

En este tutorial vamos a ver cómo crear y validar formularios con Angular 2, crearemos un formulario de login haciendo uso de una clase User la cuál tendrá las propiedades username y password.

En Angular 2 las validaciones de formularios las hacemos utilizando las clase FormBuilder y Validator, las cuáles nos proporciona la funcionalidad necesaria para hacer y construir validaciones sencillas.

Si tienes dudas para crear tu proyecto te recomiendo revisar el tutorial sobre Angular2 Webpack, una vez tengas tu proyecto listo, abre el archivo src/app/app.ts y modifica el código por el siguiente.


Importamos el componente Login que vamos a crear a continuación, lo cargamos a través de la propiedad directives y finalmente lo renderizamos en la propiedad template, de esta forma tan sencilla nuestro formulario será visualizado.

Ahora crea el archivo login.ts y añade el siguiente código, vamos a ir creando el componente poco a poco para entender todo lo mejor posible.


Importamos todo lo necesario para crear y validar nuestro formulario.


Clase User que nos permite crear nuevos usuarios, no va a ser utilizada para ese propósito pero sí para poder hacer la validación del formulario con Angular 2.


Simplemente hacemos un require del formulario que vamos a utilizar y pasaremos a crear más adelante.

Validación de formularios con Angular 2

Para validar nuestro formulario vamos a crear una clase Login donde vamos a utilizar ControlGroup para crear un grupo de validaciones y Control para tipar las propiedades de la clase que van a representar a cada campo del formulario.


Lo más importante, o casi, la clase Login es la que exportamos desde el componente App y es donde se lleva a cabo la validación del formulario, creamos un nuevo user que lo asignamos a la propiedad model de la clase, decimos que la propiedad form va a ser de tipo ControlGroup y el username y password de tipo Control.

En el constructor creamos la variable fb que contiene la funcionalidad de la clase FormBuilder, de esta forma tan sencilla ya tenemos lista la validación de nuestro formulario, incluso un método submit el cuál se ejecutará al procesar el formulario.

Curso completo de Angular 2.0

Ahora crea el archivo form.html y añade el siguiente contenido, el cuál funcionará perfectamente gracias a la configuración que hemos ido creando.


Te invito a que revises el código html a fin de entender cómo funciona, es sencillo pero es más útil cuando lo averiguamos por nosotros mismos, lo único pendiente es añadir la hoja del cdn de bootstrap.css al index.html alojado en src/public.

Así de sencillo podemos crear formularios con Angular 2 validados.