Número de teléfono con mascaras y reglas de validaciones en Xamarin Forms

Contenido

Aprende a aplicar mascaras y reglas de validaciones a las entradas de números de teléfono en nuestros formularios en Xamarin.Forms. La mejor manera, y la mas rápida, es usando la librería Plugin.ValidationRules.

Muchas personas ni siquiera conocen el concepto de lo que son las reglas de validaciones, y si eres uno de ellos te recomiendo que veas todo el contenido que he desarrollado para ti. Te ahorra mucho tiempo en tu día a día como desarrollador.

Este es el inicio de una pequeña serie a la que llamo «Tips and Tricks with 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.

Validando el numero de teléfono

Lo primero que tenemos que saber es que con la nueva version de Plugin.ValidationRules tenemos un builder que podemos utilizar para inicializar nuestras propiedades de manera muy facil.

...
            public Validatable<string> Phone { get; set; }
...
            Phone = Validator.Build<string>()
                .When(x => !string.IsNullOrEmpty(x))
                .Must(x => x.Length == 12, "Minimum lenght is 12.");

            Phone.ValueFormatter = new MaskFormatter("XXX-XXX-XXXX");
...
  • Fíjate que estamos utilizando Validator.Build<string>() para inicializar nuestra propiedad.
  • De igual manera, estamos utilizando la extensión .When() para validar nuestro numero de teléfono solo cuando la propiedad no este vacía (mayormente este campo es opcional, pero dependerá de tu lógica).
  • También usamos la extension .Must() para agregar una validación sin tener que crear una regla de validación (si tu regla la vas a utilizar en varias parte de tu proyecto mejor crea una regla).
  • Y para finalizar estamos utilizando la propiedad ValueFormatter para agregar un formato a nuestros datos. En nuestro caso, la librería ya viene con una Mascara formateadora llamada MaskFormatter que recibe «X» como parámetro de mascara. Con esto podemos definir el formato de nuestro teléfono.

En nuestro XAML podemos tener algo similar a esto para enlazar las validaciones.

...
           <Entry Placeholder="Phone" Text="{Binding Phone.Value}" />
           <Label  Text="{Binding Phone.Error}" TextColor="Red" />
...

Con esto tendriamos las validaciones trabajando para nosotros. Dime si no es realmente una locura.

Puedes ver todo el código aquí.

Extra

Como extra tip hay un control de XF-Material-Library que es el MaterialTextField. Con este control no necesitaras preocuparte sobre como mostrar tus errores.

...
                     <mtrl:MaterialTextField
                                ErrorText="{Binding PhoneNumber.Error}"
                                HasError="{Binding PhoneNumber.HasErrors}"
                                HelperText="Enter your phone number here."
                                InputType="Numeric"
                                MaxLength="12"
                                Placeholder="Phone number"
                                Text="{Binding PhoneNumber.Value}" />
...
iOS button

Conclusiones

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