Manejo de los Datos de Formularios
En las aplicaciones web la forma más natural de obtener datos del usuario es a través de los formularios, con ellos podemos crear elementos que capturen texto o simples confirmaciones como los checkbox, pero todo esto se puede traducir como datos del usuario, con ellos podremos hacer diferentes procesamientos.
En AngularJS trabajar con estas entradas de datos es muy sencillo, ya que por la forma en la que fue diseñada la librería podremos transformar parte de estos datos que recibimos en acciones en nuestra aplicación, ya sea para hacer cálculos o para definir su comportamiento.
En esta sección veremos un poco más acerca de cómo manejar las entradas de datos en los formularios utilizando AngularJS.
¿Cómo Funciona?
La forma en que podemos hacer la unión entre los elementos de entrada y nuestra lógica en AngularJS es muy sencilla, necesitamos utilizar la propiedad ng-model y todo tomará una especie de relación, por lo que el valor de lo que ingresemos por formulario lo podremos manipular en AngularJS, esto podrá aplicarse para los input text, radio buttons, checkbox, etc.
Veamos a continuación un pequeño ejemplo de lo que estamos explicando:
Aquí lo que sucede es que dentro del ámbito de NuestroControlador podremos manipular lo que el usuario haga en el checkbox marcador, entonces si el usuario lo marca, inmediatamente recibiremos a marcador como true y si lo desmarca tendremos la respuesta contraria.
Podemos ir un poco más allá y podemos establecer en NuestroControlador que marcador esté marcado por defecto, entonces cuando el usuario vea la página por primera vez estará marcado el checkbox.
Añadir Acciones
Pero no solo en capturar los datos debemos quedarnos, podemos y necesitamos incluir acciones una vez que recibamos las entradas, en AngularJS podemos llamar funciones y métodos que se ejecuten en un evento de nuestro elemento input, por ejemplo vamos a realizar una pequeña calculadora que saque el estimado de inversión para hacer un emprendimiento, lo que haremos será multiplicar por 10 el valor recibido, veamos:
1- Primero debemos establecer los elementos HTML que vamos a utilizar, como en el ejemplo anterior vamos a crear un controlador y el input va a ser parte de nuestro modelo:
2- Vemos que hemos introducido una nueva propiedad ng-change y a ella le hemos asignado el llamado a una función que se llama calculoInversion() esto quiere decir que cada vez que nuestro campo input cambie, la función será llamada, como vemos es algo muy simple.
3- Ahora vamos a construir el código con AngularJS que va a dar vida a lo que hemos visto:
4- Construimos el controlador adecuado, luego indicamos un valor inicial para el modelo, en este caso lo igualamos a 0, esto incluye ambos elementos tanto estimadoInicial como necesario, luego creamos la función calculoInversion() vemos que la hacemos en el llamado ámbito de nuestro controlador, de esta forma está asociado a nuestro elemento. Ya con esto nuestra aplicación debe funcionar a un nivel básico.
Por supuesto este ejemplo le falta varias validaciones y solo toma en cuenta cuando el usuario cambia el valor del input text, pero nos sirve como una introducción para incluir acciones en nuestras aplicaciones escritas con AngularJS.
