Una vez que ya conoces el funcionamiento de controller, scope y la potencia de los binding en Angularjs, es hora de dedicar un capítulo completo a la directivas form y ngForm. El motivo de esto no es otro que la importancia que van a jugar estas dos directivas en el desarrollo de una app.

 

Aunque podrías perfectamente no utilizarlas y gestionar todo con controladores y envíos http a tu servidor, nosotros no te recomendamos esta forma de hacer las cosas, puesto que vas a perder toda la potencia de validación y a nivel de usabilidad tus usuarios no podrían enviar un formulario al servidor pulsando la tecla intro.

 

¿Como funcionan ambas directivas y cuales son sus diferencias?

 

Cuando Angularjs compila el DOM por medio de $compile se crea un objeto del tipo FormController por cada form o ng-form y cada uno de los elementos de tipo input, select radio, textarea, etc que tengan la directiva ng-model-(two-binding) crearán un objeto del tipo ModelController que serán agregados al primero por medio del método $addControl y eliminados de éste en el $destroy del scope, mediante el método $removeControl.

 

Esto nos va a permitir acceder a ellos para validación de formularios mediante el nombre del formulario y el nombre del elemento html con lo cual es importante agregar tanto al formulario como a todos los elementos de este la propiedad name, es decir que no validamos sobre nuestro modelo sino sobre estos dos objetos(FormController y ModelController).

Siguiendo con el ejemplo expuesto en el capítulo de scope

Observa que en el primero estamos utilizando la directiva ng-form y no la form y que en ambos ejemplos marcamos name y oldPassWord cómo required y tenemos un span que se hará visible cuando cualquiera de estos campos está vacío.

 

En el primero de los ejemplos utilizamos ng-form y no funciona la directiva ng-submit, con lo cual es sencillo ver la diferencia entre ng-form y form, el primero no es más que un alias del segundo y no tiene otra utilidad que poder anidar formularios, cosa que no se pueden hacer en HTML, pero tiene ciertas limitaciones sobre form. Si te vale un consejo nosotros jamás hemos utilizado en producción ng-form, utilizamos técnicas como anidación de scope.

 

Te recomiendo que leas este link donde puedes ver claro cuales son las diferencias.

 

ng-submit doesn’t work with ng-form

 

Validaciones

 

Una de las cosas más importantes en cualquier aplicación es validar las entradas de usuario, tanto en el cliente y sobre todo en el servidor, en este punto, nos vamos a centrar en la validación del lado del cliente para evitar roundtrips innecesarios, asumiendo que tienes claro que hay que validar sí o sí en el servidor para evitar problemas de seguridad entre otros.

 

Angularjs define una serie de directivas por defecto que te ayudan con la validación en el lado del cliente.

 

1. required o ng-required.
2. min
3. max
4. ng-minlenght.
5. ng-maxlength.
6. ng-pattern.

 

Es fácil deducir que con estas directivas es imposible cubrir todos los casos posibles en una app y para ello te recomendamos el uso de este módulo que lo puedes descargar desde github.

 

ui-validation

 

El código fuente de este módulo lo que hace es hacer un eval de la expresión y si es correcto establece $setValidity a una key y su valor a true, en caso contrario a false. Este método pertenece al objeto ModelController y en el caso que una entrada no sea correcta en nuestro modelo se establece la propiedad a undefined. La función de validación se agrega a $formaters y $parsers del mismo objeto.

Si vemos nuestro código en ejecución y si desde la consola del explorador después de seleccionar el div donde tenemos ng-form ejecutamos la siguiente sentencia, puedes ver el funcionamiento de FormController y ModelController.

 

angular.element($0).scope().personaldata

Una de las cosas más tediosas desde nuestro punto de vista en la validación de formularios, es utilizar una etiqueta span por cada uno de los posibles errores que se puedan producir en la introducción de valores en un campo.

 

Os ponemos un ejemplo sencillo, imagina un campo que es requerido y que su longitud no puede superar los 150 caracteres. Angularjs antes de la aparición de ngMessages nos obligaba a tener una etiqueta por cada mensaje o bien gestionar esto con una directiva propia(cosa que no vamos a abordar en este capítulo).

 

 

Con lo cual a partir de la versión 1.3.0-beta.10 puedes utilizar como te comentamos este módulo y ahorrarte gran cantidad de tiempo y descarga de información repetida.

 

Para más información https://docs.angularjs.org/guide/forms

 

@_PedroHurtado y @XaviPaper

Vínculo hacia el capitulo anterior: (7) Bindings