Validaciones en AngularJS
Google Developer Expert
@adesis
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