AngularJS - Validaciones de formularios #1

Introducción

En este articulo explicamos brevemente ciertas cualidades de AngularJS 1.3.x

Validar debería ser fácil con Angular

Sin embargo, hay flujos de validaciones que no son soportados, por ejemplo:

• Cargar formulario con campos "required": En Angular, siempre son mostrados. No hay forma sencilla de decirle después que salga del foco.
• Validaciones cuando haces clic el botón de submit o un botón cualquiera.

Usando Angular 1.3 ngMessages

Yearofmoo describe ngMessages de una manera correcta. Lo esencial es que ngMessages lee el $error del campo (ejemplo form.campo.$error) y toma el primer key/value y presenta este error en caso de estar activo.

Lo cual funciona de perfectamente bien. Hasta que queremos resolver los dos casos extremos mencionados (que en Backbone son fáciles de implementar ciertamente).

Caso #1 - Solo debe mostrarme requerido al perder el foco

Mi solución rudimentaria fue usar un combo de ng-blur y ng-change, mantener el required message en el conjunto de ng-messages y tener una simple función en el controller. Esto se puede mejorar mucho mas con un Angular Directive.

Ahora, al cargar el formulario, solo se muestra requerido al perder el foco (blur). Lo bueno de esto es que reusamos ngMessages tal como esta.

En la próxima entrega explicaremos como resolver el Caso #2 con el submit.

Correciones: En vez de setear invalid = true, debe usarse $setValidity

Hasta la siguiente entrega
Rogelio Morrell