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

 

Validaciones en Angularjs

By Gonzalo Ruiz de Villa

Validaciones en Angularjs

Validaciones con AngularJS

  • 4,534