Diferencias

Muestra las diferencias entre dos versiones de la página.

--- unidades:08_formularios:03_mensajes [2014/08/28 09:21]
admin [Problemas]
+++ unidades:08_formularios:03_mensajes [2014/10/22 16:59] (actual)
admin [El botón de Submit]
@@ Línea 5: / Línea 5: @@
 <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.
 </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&aacute;ximo debe ser 50</span>
 </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 =====
@@ Línea 28: / Línea 28: @@
 <span ng-show="miFormulario.nombre.$error.required">El campo es requerido</span>
 </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]>
@@ Línea 48: / Línea 48: @@
 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?
-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 =====
@@ Línea 70: / Línea 70: @@
 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]>
@@ Línea 89: / Línea 89: @@
 ===== 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 en inválido.
+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 =====
 {{url>http://embed.plnkr.co/pkqjIO}}

unidades/08_formularios/03_mensajes.1409210478.txt.gz · Última modificación: 2014/08/28 09:21 por admin

Ir hasta arriba