Máscaras con Plugin.ValidationRules en Xamarin.Forms

Contenido

Aprende a aplicar máscaras a tus reglas de validaciones en las entradas de textos de los usuarios en Xamarin.Forms. La mejor manera, y la mas rápida, es usando la librería Plugin.ValidationRules.

Este articulo usa la librería Plugin.ValidationRules que puedes descargar desde la NuGet Gallery aquí.

Este articulo es parte de una pequeña serie a la que llamo «Tips and Tricks con Plugin.ValidationRules» donde te enseñare a sacarle el mayor provecho a esta librería para que no tengas dolores de cabeza haciendo validaciones en tus formularios.

Agregando máscaras

Por donde empezar

Si esta es la primera vez que escuchas sobre la maravillosa libreria Plugin.ValidationRules te recomiendo que veas toda la documentación aqui.

Formateadores y Máscara por defecto

Como saben la libreria Plugin.ValidationRules nos facilita mucho la vida a la hora de agregar validaciones a las entradas de datos de los usuarios pero no se queda ahi, sino que tambien podemos formatear esos valores desde nuestro código sin mucho esfuerzo.

💡TIP: Lo bonito de esta libreria es que esta pensada para que puedas reutilizar código en todo momento.

Dentro de nuestro objecto Validatable<T> nosotros podemos encontrar una propiedad llamada ValueFormatter que servir´á para darle formato a nuestros datos.

Veamos un ejemplo a continuación:

...
            public Validatable<string> Phone { get; set; }
...
            Phone = Validator.Build<string>();
...
            Phone.ValueFormatter = new MaskFormatter("(XXX)XXX-XXXX");
...

En el ejemplo podemos ver nuestra propiedad Phone, dentro de nuestra ViewModel, esta siendo inicializada. Una vez inicializada se le agrega a la propiedad Phone.ValueFormatter la formateador que vamos a utilizar; en nuestro caso la formateador por defecto en la libreria MaskFormatter.

De igual manera tenemos otros formateadores:

  • StringCaseFormatter: Define que tipo de caso de letra quieres.
  • BoolNegationFormatter: Excelente para negar booleanos.
  • StringNumericFormatter: Útil para validar solo texto númerico.

MaskFormatter

MaskFormatter se creó con el fin de agregar máscaras de una manera mas agradable y sencilla, donde no necesitemos muchos pasos para incluir la misma.

Con una linea de código ya podemos tener nuestra máscara agregada. Otra alternativa a esto es utilizar behaviors pero el proceso es mas largo y no todas las ventajas que la libreria ofrece.

La idea de agregar una máscara en un campo de entrada es que sea más legible por humanos. Por ejemplo, un número de teléfono puede parecer +55 555 555 555 o (555) 555-555.

...
      Phone.ValueFormatter = new MaskFormatter("(XXX)XXX-XXXX");
...

MaskFormatter establecerá las posiciones de caracteres en las que se encuentra cada carácter de máscara. Por ejemplo, MaskFormatter, reconoce la X como carácter especial. Por lo tanto, una máscara de (XXX) XXX-XXX, significará que los espacios, corchetes y guiones se incluirán como parte de la entrada no tipada por el usuario.

⚠Warning

MaskFormatter también limitará la cantidad de texto que puedes introducir, hasta la máscara.

Esta máscara nace del behavior que mayormente se utiliza en la comunidad. Lo pueden ver aqui.

Creando tu propia máscara o formateador

Crear un formateador es bantante fácil y sencillo. Veamoslo a continuación:

...
    public class MyFormatter : IValueFormatter<string>
    {
        public bool Format(string value)
        {
            // your logic here
            return value;
        }
    }
...

Una vez creado el formateador solo debemos agregarlo a nuestra propiedad Validatable<T>.

...
      MyProperty.ValueFormatter = new MyFormatter();
...

Puedes ver un ejemplo completo aqui:

Conclusiones

Puedes ver todo el código aquí.

De igual manera, los invito a que hagan estas validaciones sin la librería Plugin.ValidationRules para que puedan notar la diferencia y lo mucho que esta nos ayuda.

Nada disfruten. Si quieren mas tips como estos déjenmelo saber en los comentarios o en mi twitter, estoy siendo muy activo por allá.

Recuerden que sus interacciones son las que me ayudan a saber por donde dirigir el contenido. Al final, la idea es ayudar lo mas que podamos.

Espero que este video les sea de utilidad. Un abrazo, y hasta la próxima.

¿Qué opinas de este contenido?
 
Luis Matos

Luis Matos

I help professionals and companies to create value solutions. I am a Systems Engineer, blockchain executive, and international mobile application speaker. Founder of the Malla Consulting Agency and several international technology communities.
Suscribirte
Notificar de
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x

Buscar en el sitio