javascript - Angular 7 Input Mask for phone number - Stack Overflow

admin管理员组

文章数量:1391981

I am trying to write code input mask to format the phone number like (123) 456-7890. I almost done.

I created directive to perform the format, but I'm stuck on the paste operation.

If the user type the phone number in textbox its working fine.

But if the user copy and paste the 10 digit phone number in textbox the formatting happened only in textbox not reflecting in model binding.

textbox show -> (123) 456-7890 but in ngModel bind is 1234567890

Actual code in StackBlitz

Code

html template

<form #myForm="ngForm">
<div>
  <span>Copy and paste the below text in textbox </span>
  <br>
  <br>
  <span>1234567890</span>
</div>
<hr>
<br>
    <div>
        <input name="phoneNumber" id="phoneNumber" class="form-control" phone autoplete="off"
  maxlength="14" (blur)="onSubmit()" [(ngModel)]="phoneNumber"/>
        <br/>
  <br/>
        <span>PhoneNumber NgModel Bind : {{phoneNumber}}</span>
        <br/>
  <br/>
        <span *ngIf="myForm?.controls?.phoneNumber">PhoneNumber form value : {{myForm.controls.phoneNumber.value}}</span>
    </div>
</form>

Component

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './appponent.html',
  styleUrls: [ './appponent.css' ]
})
export class AppComponent  {
  name = 'Angular';
  phoneNumber: string;
}

Directive

import { Directive } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: '[ngModel][phone]',
  host: {
    '(ngModelChange)': 'onInputChange($event)'
  }
})
export class MaskDirective {

  constructor(public model: NgControl) {}

  onInputChange(value) {
        var x = value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
        value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');

        this.model.valueAccessor.writeValue(value);
  }

}

I am trying to write code input mask to format the phone number like (123) 456-7890. I almost done.

I created directive to perform the format, but I'm stuck on the paste operation.

If the user type the phone number in textbox its working fine.

But if the user copy and paste the 10 digit phone number in textbox the formatting happened only in textbox not reflecting in model binding.

textbox show -> (123) 456-7890 but in ngModel bind is 1234567890

Actual code in StackBlitz

https://stackblitz./edit/angular-648zrp

Code

html template

<form #myForm="ngForm">
<div>
  <span>Copy and paste the below text in textbox </span>
  <br>
  <br>
  <span>1234567890</span>
</div>
<hr>
<br>
    <div>
        <input name="phoneNumber" id="phoneNumber" class="form-control" phone autoplete="off"
  maxlength="14" (blur)="onSubmit()" [(ngModel)]="phoneNumber"/>
        <br/>
  <br/>
        <span>PhoneNumber NgModel Bind : {{phoneNumber}}</span>
        <br/>
  <br/>
        <span *ngIf="myForm?.controls?.phoneNumber">PhoneNumber form value : {{myForm.controls.phoneNumber.value}}</span>
    </div>
</form>

Component

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.ponent.html',
  styleUrls: [ './app.ponent.css' ]
})
export class AppComponent  {
  name = 'Angular';
  phoneNumber: string;
}

Directive

import { Directive } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: '[ngModel][phone]',
  host: {
    '(ngModelChange)': 'onInputChange($event)'
  }
})
export class MaskDirective {

  constructor(public model: NgControl) {}

  onInputChange(value) {
        var x = value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
        value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');

        this.model.valueAccessor.writeValue(value);
  }

}

• javascript
• angular7
• dom-events
• angular-directive

Share Improve this question Follow edited Feb 22, 2020 at 19:03 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Feb 22, 2020 at 14:03 Angular BeginnerAngular Beginner 6511 gold badge33 silver badges77 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

here's the code I wrote recently. It not only validates the phone pattern but automatically adds parenthesis and dashes as you enter numbers

public isValidFlg:boolean = true;

validatePhoneNo(field) {
  var phoneNumDigits = field.value.replace(/\D/g, '');

  this.isValidFlg = (phoneNumDigits.length==0 || phoneNumDigits.length == 10);

  var formattedNumber = phoneNumDigits;
  if (phoneNumDigits.length >= 6)
    formattedNumber = '(' + phoneNumDigits.substring(0, 3) + ') ' + phoneNumDigits.substring(3, 6) + '-' + phoneNumDigits.substring(6);
  else if (phoneNumDigits.length >= 3)
    formattedNumber = '(' + phoneNumDigits.substring(0, 3) + ') ' + phoneNumDigits.substring(3);

  field.value = formattedNumber;
}

and the input:

<input type="text" (input)="validatePhoneNo($event.target)" placeholder="(___) ___-____">
<div *ngIf="!isValidFlg">Invalid Format"</div>

Please try @HostListener

@HostListener('paste',['$event']) onEvent($event) {}

Reference:- http://embed.plnkr.co/hsisILvtKErBBOXECt8t/

本文标签： javascriptAngular 7 Input Mask for phone numberStack Overflow