Formateo del número de teléfono Entrada en angular -- angular campo con typescript campo con format campo con phone-number camp Relacionados El problema

Formatting Phone Number Input In Angular


8
vote

problema

Español

He visto muchas soluciones para formatear un campo de entrada de número de teléfono en Angularjs, pero no puedo encontrar nada en Angular 7. Lo que quiero esencialmente es que el usuario escriba lo siguiente en el campo de texto:

123456789

y para el campo de texto para formatear la entrada como:

(123) 456-789

¿Cómo puedo hacer esto? He encontrado el siguiente rogex para validarlo:

  ^(([0-9]{3}) |[0-9]{3}-)[0-9]{3}-[0-9]{4}$   
Original en ingles

I have seen many solutions to formatting a phone number input field in Angularjs, but I cannot find anything on Angular 7. What I essentially want is for the user to type the following in the textfield:

123456789

and for the textfield to format the input as:

(123) 456-789

how can I go about doing this? I have found the following regex to validate it:

^(\([0-9]{3}\) |[0-9]{3}-)[0-9]{3}-[0-9]{4}$ 
           

Lista de respuestas

12
 
vote
vote
La mejor respuesta
 

Puede manejar esto con una directiva de máscara de teléfono de la siguiente manera,

  export class PhoneMaskDirective {    constructor(public ngControl: NgControl) { }    @HostListener('ngModelChange', ['$event'])   onModelChange(event) {     this.onInputChange(event, false);   }    @HostListener('keydown.backspace', ['$event'])   keydownBackspace(event) {     this.onInputChange(event.target.value, true);   }     onInputChange(event, backspace) {     let newVal = event.replace(/D/g, '');     if (backspace && newVal.length <= 6) {       newVal = newVal.substring(0, newVal.length - 1);     }     if (newVal.length === 0) {       newVal = '';     } else if (newVal.length <= 3) {       newVal = newVal.replace(/^(d{0,3})/, '($1)');     } else if (newVal.length <= 6) {       newVal = newVal.replace(/^(d{0,3})(d{0,3})/, '($1) $2');     } else if (newVal.length <= 10) {       newVal = newVal.replace(/^(d{0,3})(d{0,3})(d{0,4})/, '($1) $2-$3');     } else {       newVal = newVal.substring(0, 10);       newVal = newVal.replace(/^(d{0,3})(d{0,3})(d{0,4})/, '($1) $2-$3');     }     this.ngControl.valueAccessor.writeValue(newVal);   } }   

StackBlitz Demo

 

You can handle this with a Phone Mask Directive as follows,

export class PhoneMaskDirective {    constructor(public ngControl: NgControl) { }    @HostListener('ngModelChange', ['$event'])   onModelChange(event) {     this.onInputChange(event, false);   }    @HostListener('keydown.backspace', ['$event'])   keydownBackspace(event) {     this.onInputChange(event.target.value, true);   }     onInputChange(event, backspace) {     let newVal = event.replace(/\D/g, '');     if (backspace && newVal.length <= 6) {       newVal = newVal.substring(0, newVal.length - 1);     }     if (newVal.length === 0) {       newVal = '';     } else if (newVal.length <= 3) {       newVal = newVal.replace(/^(\d{0,3})/, '($1)');     } else if (newVal.length <= 6) {       newVal = newVal.replace(/^(\d{0,3})(\d{0,3})/, '($1) $2');     } else if (newVal.length <= 10) {       newVal = newVal.replace(/^(\d{0,3})(\d{0,3})(\d{0,4})/, '($1) $2-$3');     } else {       newVal = newVal.substring(0, 10);       newVal = newVal.replace(/^(\d{0,3})(\d{0,3})(\d{0,4})/, '($1) $2-$3');     }     this.ngControl.valueAccessor.writeValue(newVal);   } } 

STACKBLITZ DEMO

 
 
   
   
6
 
vote

Puede instalar fácilmente Paquete NGX-Mask y luego especifique su máscara ideal como esta :

  mask="(000) 000-000"  < input type="text" mask="(000) 000-000" />   
 

You can easily install ngx-mask package and then specify your ideal mask like this:

mask="(000) 000-000"  < input type="text" mask="(000) 000-000" /> 
 
 
 
 

Relacionados problema

0  ¿Cómo se puede crear y administrar un foneto: etiqueta similar al correo: Etiqueta en Emacs con Skype?  ( How can one create and manage a phoneto tag similar to the mailto tag in emacs ) 
bajo EMACS 23, Mailto: foo@foobar.foo está muy bien subrayado y lanza la escritura de un correo electrónico cuando presiona Entrar. Dado un sistema con Emac...

954  Cómo validar los números de teléfono usando REGEX  ( How to validate phone numbers using regex ) 
Estoy tratando de armar un regeo integral para validar los números de teléfono. Idealmente, manejaría los formatos internacionales, pero debe manejar los form...

4  Expresión regular para el número de teléfono holandés  ( Regular expression for dutch phone number ) 
Estoy buscando una expresión regular para que coincida con un número de teléfono holandés. Estos son los requisitos de formato: debe comenzar con 0 conti...

0  Destacando un número de teléfono en una página web para Firefox Complement  ( Highlighting a phone number on a web page for firefox add on ) 
Estoy tratando de desarrollar un complemento de Firefox utilizando la documentación proporcionada por el MDN. MI REGEX funciona bien cuando se prueba en una p...

0  ¿Cómo verificar el número de teléfono dado es un número internacional o no internacional en Android?  ( How to check given phone number is international or non international number in ) 
Mi requisito es averiguar el número del destinatario del mensaje es un número internacional o número nacional. Hay una API de Android o cualquier biblioteca...

481  ¿Cómo marcar los números de teléfono?  ( How to mark up phone numbers ) 
Quiero marcar un número de teléfono como enlace llamado en un documento HTML. He leído El enfoque de microformas , y lo sé, que el tel: El esquema sería es...

6  Obtenga un número de teléfono propio en Android (muchos problemas probados pero no trabajados)?  ( Get own phone number in android many issues tested but not worked ) 
He desarrollado una aplicación de Android, pero necesito get the phone number de the phone owner . He visto muchas preguntas aquí en StackOverflow y muchas...

0  TELÉFONO DE CONTACCIÓN, LYNC 2013  ( Contactendpoint phone lync 2013 ) 
Mi aplicación que utiliza Lync 2013, se comunica con un servidor a través de WebSocket y recibe notificaciones. Estas notificaciones están en formato JSON, po...

0  ASP Expresión regular para el formato de teléfono del Reino Unido en vb.net  ( Asp regular expression for uk telephone format in vb net ) 
Quiero un validador de expresión regular para mi campo de teléfono en vb.net. Por favor, consulte el requisito de abajo: El formato del teléfono debe ser (+...

6  Validación del número de teléfono en Ruby  ( Validating phone number in ruby ) 
¿Cuáles son las reglas para validar un número de teléfono de América del Norte? Además, ¿hay un regex puedo usar? ¿Hay una gema para hacer esto? Aquí hay ...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos