VALIDANDO CAMPOS DE FORMULARIO CON ANGULAR.JS. PARTE 2. LA PRÁCTICA

<script src=”my own” title=”parte 2 la práctica”>

En el post anterior expliqué un poco la teoría de que iba la validación de campos de formulario en Angular.js. Acá aplico un poco bastante de esa teoría.

No voy a enfocarme en el CSS porque el framework utilizado es bastante explícito con la sintaxis, y además , me interesa más la parte Angular del asunto…

Explicando el código…

Pueden ver el repo para más información respecto al código, sólo me interesa explicar la cuestión de las directivas y eso…

Formulario retocado con Material Design ( :3 )

Formulario retocado con Material Design ( :3 )

Para esto, incluímos Angular.js y el módulo de ngMessages para encapsular la lógica de validación:

<script src="angular.min.js"></script>
<script src="angular-messages.min.js"></script>

…y un poco de CSS usando helpers de Angular.js:

input.ng-invalid.ng-dirty, textarea.ng-invalid.ng-dirty{ border-bottom: 1px solid #D25349; }
input.ng-valid.ng-dirty, textarea.ng-valid.ng-dirty{ border-bottom: 2px solid #019739; }

Aquí un fragmento de código que posee bastante información (suficiente para explicar el resto del formulario):

<script>
	angular.module('messages', ['ngMessages']);
</script>
</head>
<body ng-app="messages">
	<div class="container">
	<h3>Ingrese sus datos</h3>
	<form name="registro" novalidate>
		<div class="row">
			<section class="input-field col s12 m6">
				<label for="nombre">Nombre:</label>
				<input type="text" ng-model="data.nombre" name="nombre" required pattern="[ñáéíóúA-Za-z ]+">
		  	<div ng-messages="registro.nombre.$error" ng-messages-include="errores.html" ng-hide="registro.nombre.$pristine"></div>
			</section>
	...

Tenemos mucho que explicar respecto a este código…

  • En la línea 16 se resalta el hecho de que el módulo ngMessages se inyecta como dependencia de nuestra aplicación.
  • En la línea 22 se resalta el atributo novalidate, el cual deshabilita la validación HTML nativa que realiza el navegador, así como los mensajes predeterminados y el método checkValidity() visto es posts anteriores.
  • En la línea 26, se resalta lo siguiente:
    • El valor de ng-model es elegido a discreción, sin embargo, Angular.js realiza la validación del campo usando el valor del atributo name.
    • Si el atributo name no existe, Angular.js usa el valor de ng-model, sin embargo, esto se debería evitar si está presente el atributo novalidate en el formulario.
    • Cada validación incluída es un atributo asignado al objeto global $error, en la forma: <nombre-formulario>.<nombre-campo>.$error.<validación>
  • En la línea 27, se resalta lo siguiente:
    • La directiva ng-messages agrupa todos los mensajes de error a ser mostrados cuando la validación no se cumple, por eso, debe observar el comportamiento de $error.
    • La directiva ng-messages-include indica un template donde se pueden agrupar todos los mensajes de error a ser llamados durante la interacción. Para ello, es importante evitar abrir el archivo directamente en el navegador. Aquí la directiva ng-message se aplica un mensaje para una validación en específico:
      <div ng-message="required" class="red darken-2 center-align white-text">Este campo es requerido!</div>
      <div ng-message="pattern" class="red darken-2 center-align white-text">No cumple con el patrón solicitado</div>
      
    • Para asegurar que alguno de los mensajes no se muestren cuando no exista interacción en el campo, se usa la directiva ng-hide, observando el valor del objeto $pristine en el mismo.
Las validaciones haciendo lo suyo...

Las validaciones haciendo lo suyo…

Como valor agregado, el formulario no habilita el envío de los datos (botón submit) hasta tanto no se hayan validado todos los campos del formulario

...y aquí cuando todo va bien

…y aquí cuando todo va bien

Hay mucho por hacer con este formulario, y las validaciones de Angular.js. En algunos casos puede resultar más práctico usar las directivas de Angular.js (como ng-required y ng-pattern) encapsulando su lógica dentro de un controlador, y cosas por el estilo.

Si deseas profundizar en la validación de campos de formulario con ng-messages, puedes empezar con este artículo. Cualquier método es válido… 😉

</script>

Anuncios