LIBRERIA ANGULAR. PARTE 4. VALIDANDO

< script src=”my own” title=”parte 4. validando”>

Al fiiiiiiiiin XD … Después de darme un chance de validar la información (y el código ^^’ ) que me permitiera terminar de escribir este post, y luego de muchísimos días desde que escribí el último post sobre la Librería Angular, me echo una escapada para finalmente publicarlo :mrgreen:

Controlando

En nuestro archivo controllers.js añadimos un nuevo método a LibrosCtrl para agregar nuevos libros, usando el método de la fábrica libros:

...
$scope.addLibro = function(libro) {
	//TODO: Validación de campos vacíos e inconsistencia de valores
	if (typeof libro === "object"){
		libreria.addLibro(libro);
	} else {
		console.log("No se pudo insertar el libro!");
	}
};
...

Dirigiendo

Implementamos una directiva nueva para usar las clases propias del framework Bootstrap CSS de forma condicional: ng-class. Esta directiva permite determinar, dependiendo del resultado de evaluar una expresión como true o false, si se aplica una clase CSS o no a un elemento HTML. En el ejemplo vemos la inclusión de la directiva en los templates de formulario, por ejemplo:

...

<div class="form-group" ng-class="{'has-error': libroForm.categoria.$invalid && libroForm.categoria.$dirty, 'has-success': libroForm.categoria.$valid && libroForm.categoria.$dirty}" ng-controller="CategoriasCtrl">
	<label class="control-label" for="categoria">Categoría</label>
	<select class="form-control" ng-model="libro.categoria" name="categoria" id="categoria" required ng-options="categoria.categoria as categoria.nombre | uppercase for categoria in categorias">
<option value="">- SELECCIONE -</option>
	</select>
</div>

...

Para rellenar el <select> con las categorías de la fábrica categorias, se usa la directiva ng-options, la cual permite mediante una sintaxis específica, extraer y formatear información por cada ítem o como se desee. Puedes ver los objetos condicionales de estado para campos de formulario en este post.

Fabricando

En nuestro archivo app/factories.js incluímos un método que se usa en el controlador para hacer push al arreglo de libros, visualizando el nuevo libro automáticamente en la lista de libros.

...
libreria.addLibro = function(libro) {
	//propiedad que define la visualización del botón "Comprar"
	libro.existente = libro.existente || libro.inventario > 0 ? true : false;
	libreria.listaLibros.push(libro);
}
...

Y el funcionamiento es excelente!

Formulario Agregar Nuevo Libro

Formulario Agregar Nuevo Libro

Validación funcionando

Validación funcionando

Se habilita la inserción cuando todos los campos del formulario son válidos

Se habilita la inserción cuando todos los campos del formulario son válidos

Libro insertado! :roll:

Libro insertado! 🙄

Y entonces, queda pendiente la persistencia de los libros insertados y unas cosillas que vi #porai 😈

Mientras, puedo sumar +0,5 a la cuenta *risa malvada* 😉

</script>

Anuncios

3 comentarios en “LIBRERIA ANGULAR. PARTE 4. VALIDANDO

Los comentarios están cerrados.