Validaciones en AngularJS

@gruizdevilla                  

+GonzaloRuizdeVilla                   

Google Developer Expert                

@adesis             

Meetup AngularJS Madrid                

Nuevo curso del meetup

• Buscamos voluntarios para nuevas charlas
• Podéis sugerir nuevas charlas a través de la página del meetup
• Nueva cuenta de twitter del grupo @AngularJSMadrid
• Charlas que queremos dar a lo largo del curso (poned en comentario lo que más os interese):
  • Performance
  • Internacionalización
  • Diseño de directivas
  • AngularJS y Polymer
  • Material Design con AngularJS
  • AngularJS 2.0
  • AngularJS como frameworks integrador de frameworks
  • ....

La cuña inevitable:

¿Te apetece venir a seguir aprendiendo conmigo y el equipo de @adesis sobre AngularJS?

Sorteo

http://goo.gl/meFDLg

El repo:

https://github.com/gonzaloruizdevilla/angularjs-formvalidation

Para arrancar los ejemplos lo típico, necesitas nodejs, grunt-cli y bower y luego:

npm install

bower install

grunt serve

La filosofía de las validaciones

Las validaciones se agregan a un formulario (form=>html).

Las validaciones son, por tanto, declarativas.

Si las validaciones están en el HTML, entonces los controladores no deberían saber nada de ellas.

Declarando un formulario

con <form>

Declarando un formulario

con <ng-form>

ng-form permite anidar formularios

importante: las validaciones se propagan

formularios anidados y aislados

mientras no esté disponible, una sencilla directiva permite resolverlo

novalidate

Agregamos el atributo porque usaremos la infraestructura de validaciones de AngularJS y no queremos inteferencias
de validaciones nativas del navegador

Estados del formulario

Propiedades del formulario:

• $valid
• $invalid
• $pristine
• $dirty

Clases del formulario:

• ng-valid
• ng-invalid
• ng-pristine
• ng-dirty

el campo input

viejo conocido

$error: inspeccionando los errores

type

cada tipo de campo proporciona errores con información semántica

ng-messages

porque no nos gusta repetirnos

ng-modeloptions

¿echabas de menos el 'blur'?

ng-modeloptions

hilando más fino con los campos: debounce y getter/setter

validaciones propias

$setValidity

(te recomiendo revisar la presentación de directivas:

https://slides.com/gruizdevilla/directivas-angularjs )

$validators

porque validar debería ser más sencillo

$asyncValidators y $pending

porque cuando tardamos en validar algo, eso no es válido, pero tampoco es inválido

informes de errores

resolviendo casuísticas habituales de vista sin ensuciar los controladores

-¡No sabes nada Jon Nieve! - (Ygritte).

¡Gracias!

Sorteo

http://goo.gl/meFDLg