Tuesday, March 19, 2019

Mostrar y ocultar el valor de un input tipo password

Seguramente hay muchos approaches pero el que estoy usando yo (para AngularJS) es el que voy a compartir por aquí. La idea es dar al usuario la opción de ver lo que está escribiendo como contraseña en un formulario a través de un botón - ícono de ojo que lo pueden encontrar en este link: https://material.io/tools/icons/?style=baseline

Los nombres de íconos que estoy utilizando son: visibility y visibility_off

So, let's start:

HTML


1. Agregamos una condicional en el type del input, de acuerdo a la condición será de tipo text o de tipo password.

2. Agregamos el ícono el cual tendrá un evento click.

3. El ícono será cambiado de acuerdo al flag que manejaremos desde el controller, entonces también vamos a manejar una condicional similar al punto 1.

CONTROLLER

1. Agregamos la función que manejará el valor de mostrar o no mostrar la contraseña.


Easy, right?

Happy coding!