menú
buscar
Diferencias
Muestra las diferencias entre dos versiones de la página.
|
unidades:08_formularios:03_mensajes [2014/08/28 09:33] admin [Estilos CSS] |
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 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 93: | Línea 93: | ||
| 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. | 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 uqe AngularJS aplicará automáticamente a los campos: | + | Podemos definir 4 clases CSS que AngularJS aplicará automáticamente a los campos: |
| * ''ng-valid'' | * ''ng-valid'' | ||
| * ''ng-invalid'' | * ''ng-invalid'' | ||
