Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Mask for an Input to allow phone numbers?

Is it possible to have model-driven form in Angular 2 and implement a directive that would allow to mask an input field like a phone number entry (123) 123-4567?

like image 592
bensiu Avatar asked Jun 13 '16 23:06

bensiu


People also ask

How do you mask a phone number in input?

Input Mask Basics All you do is create a phone format using “9” to represent any digit and any other characters such as “( ) -” to use as separators. Mask examples: (999) 999-9999 = (977) 533-1253. (99) 99-99-9999 = (43) 36-55-4511.

How do you create an input mask in Excel?

1. Right-click the cell where you want to create a mask input (here, cell B2), and choose Format Cells… 2. In the Format Cells window, (1) choose Custom category, (2) enter #”:”00 in the Type box, and (3) click OK.


1 Answers

Angular5 and 6:

angular 5 and 6 recommended way is to use @HostBindings and @HostListeners instead of the host property

remove host and add @HostListener

 @HostListener('ngModelChange', ['$event'])   onModelChange(event) {     this.onInputChange(event, false);   }    @HostListener('keydown.backspace', ['$event'])   keydownBackspace(event) {     this.onInputChange(event.target.value, true);   } 

Working Online stackblitz Link: https://angular6-phone-mask.stackblitz.io

Stackblitz Code example: https://stackblitz.com/edit/angular6-phone-mask

Official documentation link https://angular.io/guide/attribute-directives#respond-to-user-initiated-events

Angular2 and 4:

Plunker >= RC.5

original

One way you could do it is using a directive that injects NgControl and manipulates the value

(for details see inline comments)

@Directive({   selector: '[ngModel][phone]',   host: {     '(ngModelChange)': 'onInputChange($event)',     '(keydown.backspace)': 'onInputChange($event.target.value, true)'   } }) export class PhoneMask {   constructor(public model: NgControl) {}    onInputChange(event, backspace) {     // remove all mask characters (keep only numeric)     var newVal = event.replace(/\D/g, '');     // special handling of backspace necessary otherwise     // deleting of non-numeric characters is not recognized     // this laves room for improvement for example if you delete in the      // middle of the string     if (backspace) {       newVal = newVal.substring(0, newVal.length - 1);     }       // don't show braces for empty value     if (newVal.length == 0) {       newVal = '';     }      // don't show braces for empty groups at the end     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 {       newVal = newVal.replace(/^(\d{0,3})(\d{0,3})(.*)/, '($1) ($2)-$3');     }     // set the new value     this.model.valueAccessor.writeValue(newVal);          } } 
@Component({   selector: 'my-app',   providers: [],   template: `   <form [ngFormModel]="form">     <input type="text" phone [(ngModel)]="data" ngControl="phone">    </form>   `,   directives: [PhoneMask] }) export class App {   constructor(fb: FormBuilder) {     this.form = fb.group({       phone: ['']     })   } } 

Plunker example <= RC.5

like image 122
Günter Zöchbauer Avatar answered Sep 26 '22 00:09

Günter Zöchbauer