Muestra las diferencias entre dos versiones de la página.
unidades:08_formularios:03_mensajes [2014/08/27 22:45] admin [8.3 Mensajes] |
unidades:08_formularios:03_mensajes [2014/10/22 16:59] (actual) admin [El botón de Submit] |
||
---|---|---|---|
Línea 5: | Línea 5: | ||
<note> | <note> | ||
- | Personalmente tengo que decir que no me gusta lo que voy a explicar en este tema sbore mostrar mensajes al usuario ya que implica repetir el texto de los mensajes , repetir etiquetas HTML , etc., pero es la forma en la que siempre lo he visto explicado. | + | Personalmente tengo que decir que no me gusta lo que voy a explicar en este tema sobre mostrar mensajes al usuario ya que implica repetir el texto de los mensajes , repetir etiquetas HTML , etc., pero es la forma en la que siempre lo he visto explicado. |
En proyectos reales recomiendo que te hagas tus servicios/directivas para evitar tanta repetición. | En proyectos reales recomiendo que te hagas tus servicios/directivas para evitar tanta repetición. | ||
</note> | </note> | ||
- | En los temas anteriores hemos visto como añadir las validaciones y como saber desde JavaScript las validaciones que han fallado. Ahora toca la parte de mostrar al usuario los mensajes de error. | + | En los temas anteriores hemos visto cómo añadir las validaciones y cómo saber desde JavaScript las validaciones que han fallado. Ahora toca la parte de mostrar al usuario los mensajes de error. |
Línea 19: | Línea 19: | ||
<span ng-show="miFormulario.nombre.$error.maxlength">El tamaño máximo debe ser 50</span> | <span ng-show="miFormulario.nombre.$error.maxlength">El tamaño máximo debe ser 50</span> | ||
</sxh> | </sxh> | ||
- | * Línea 2: El mensaje solo se mostrará si ''miFormulario.nombre.$error.maxlength==true'' y eso solo ocurre si realmente el valor tiene un tamaño mayor que 50. | + | * Línea 2: El mensaje sólo se mostrará si ''miFormulario.nombre.$error.maxlength==true'' y éso sólo ocurre si realmente el valor tiene un tamaño mayor que 50. |
===== Errores al inicio ===== | ===== Errores al inicio ===== | ||
Línea 28: | Línea 28: | ||
<span ng-show="miFormulario.nombre.$error.required">El campo es requerido</span> | <span ng-show="miFormulario.nombre.$error.required">El campo es requerido</span> | ||
</sxh> | </sxh> | ||
- | * Línea 3: Nada mas mostrar el formulario ya aparece el mensaje de "El campo es requerido" ya que no hay nada en el campo. | + | * Línea 3: Nada más mostrar el formulario ya aparece el mensaje de "El campo es requerido" ya que no hay nada en el campo. |
- | que un poco feo mostrar un mensaje de error cuando aun no ha empezado ni ha escribir nada , por eso para ese tipo de validaciones se suele añadir la condición ''&& miFormulario.nombre.$dirty'' . Es decir que el usuario haya escrito por lo menos algo en ese campo. | + | Queda un poco feo mostrar un mensaje de error cuando aún no ha empezado ni a escribir nada , por eso para ese tipo de validaciones se suele añadir la condición ''&& miFormulario.nombre.$dirty'' . Es decir que el usuario haya escrito por lo menos algo en ese campo. |
<sxh html;highlight: [3]> | <sxh html;highlight: [3]> | ||
Línea 48: | Línea 48: | ||
Siendo "MI_CAMPO" el nombre de cada uno de los 8 campos. | Siendo "MI_CAMPO" el nombre de cada uno de los 8 campos. | ||
- | ¿No es realmente una mala práctica hace ésto? | + | ¿No es realmente una mala práctica hacer ésto? |
- | Luego hay otro problema, ¿como era el mensaje del tamaño máximo? Era "El tamaño máximo debe ser 50". | + | Luego hay otro problema, ¿como era el mensaje del tamaño máximo? Era: "El tamaño máximo debe ser 50". |
- | Si nos fijamos hemos puesto "a piñon" el valor de 50. Seguro que tarde o temprano el atributo ''ng-maxlength'' lo cambiamos a otro valor , por ejemplo 40, y no nos damos cuenta de cambiar el mensaje. | + | Si nos fijamos hemos puesto "a piñon" el valor de 50. Seguro que tarde o temprano el atributo ''ng-maxlength'' lo cambiaremos a otro valor , por ejemplo 40, y no nos damos cuenta de cambiar el mensaje. |
- | ¿No debería poder ponerse ese 50 sacarse del atributo ''ng-maxlength''? | + | ¿No debería poder sacarse ese 50 del valor del atributo ''ng-maxlength''? |
En Java en [[http://jcp.org/en/jsr/detail?id=303|JSR 303: Bean Validation]] si que se hacen cosas así y están resueltos los 2 problemas. ¿Porque no lo están en AngularJS de forma estándar? | En Java en [[http://jcp.org/en/jsr/detail?id=303|JSR 303: Bean Validation]] si que se hacen cosas así y están resueltos los 2 problemas. ¿Porque no lo están en AngularJS de forma estándar? | ||
- | Si alguien cree que estoy equivocado en mi planteamiento estaría encantado de conocer sus razones :-) | + | Si alguien cree que estoy equivocado en mi planteamiento estaría encantado de conocer sus argumentos :-) |
===== El botón de Submit ===== | ===== El botón de Submit ===== | ||
Línea 70: | Línea 70: | ||
Vemos que de forma simple evitamos que se envíen datos sin validar en el cliente. | Vemos que de forma simple evitamos que se envíen datos sin validar en el cliente. | ||
- | A esto hya que añadir otra cosa en la función ''enviar()'' de JavaScript. | + | A esto hay que añadir otra cosa en la función ''enviar()'' de JavaScript. |
<sxh js;highlight: [2]> | <sxh js;highlight: [2]> | ||
Línea 85: | Línea 85: | ||
===== Otros patrones ===== | ===== Otros patrones ===== | ||
+ | Hay mas patrones en los formularios como que solo aparezcan los mensajes al pulsar el botón de enviar o solo al dejar el campo, sin embargo no los vamos a ver en este curso. :-( | ||
+ | |||
+ | ===== Estilos CSS ===== | ||
+ | Por último nos queda ver como aplicar estilos CSS distintos en función de las validaciones. Es el típico caso de poner el campo en rojo si el estado es inválido. | ||
+ | |||
+ | Se podría hacer perfectamente con la directiva [[unidades:04_masdirectivas:10_ngclass]] que ya vimos, pero AngularJS no ofrece otra forma más sencilla. | ||
+ | |||
+ | Podemos definir 4 clases CSS que AngularJS aplicará automáticamente a los campos: | ||
+ | * ''ng-valid'' | ||
+ | * ''ng-invalid'' | ||
+ | * ''ng-pristine'' | ||
+ | * ''ng-dirty'' | ||
+ | |||
+ | Si definimos alguna de estas clases CSS, AngularJS las aplicará automáticamente a cualquier campo (''<input>'', ''<select>'', etc) cuando dichos campos estén en el estado correspondiente al estilo CSS. | ||
+ | |||
+ | |||
+ | Es decir que si definimos el siguiente estilo: | ||
+ | <sxh css> | ||
+ | .ng-invalid { | ||
+ | border-color: red; | ||
+ | } | ||
+ | </sxh> | ||
+ | |||
+ | En cuanto un campo esté en estado ''$invalid===true'', AngularJS le aplicará el estilo CSS de ''ng-invalid'' y lo mismo con el resto de estilos. | ||
+ | |||
+ | <note> | ||
+ | A mi la verdad es que no me llama mucho ya que no quiero relacionar mis estilos CSS con nombre de AngularJS. Así que prefiero seguir usando [[unidades:04_masdirectivas:10_ngclass]] | ||
+ | </note> | ||
===== Ejemplo ===== | ===== Ejemplo ===== | ||
{{url>http://embed.plnkr.co/pkqjIO}} | {{url>http://embed.plnkr.co/pkqjIO}} |