Angular 7 Маска ввода для номера телефона

Я пытаюсь написать маску ввода кода для форматирования номера телефона, например (123) 456-7890. Я почти закончил.

Я создал директиву для выполнения форматирования, но я застрял на операции вставки.

Если пользователь вводит номер телефона в текстовое поле, он работает нормально.

Но если пользователь скопирует и вставит 10-значный номер телефона в текстовое поле, форматирование произойдет только в текстовом поле, что не отражается в привязке модели.

текстовое поле показывает -> (123) 456-7890, но в привязке ngModel - 1234567890

Актуальный код в StackBlitz

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

Код

шаблон HTML

<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 autocomplete="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>

Компонент

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

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

Директива

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
person Angular Beginner    schedule 22.02.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Пожалуйста, попробуйте @HostListener

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

Ссылка: - http://embed.plnkr.co/hsisILvtKErBBOXECt8t/

person Sohaib Ahmed    schedule 22.02.2020

arrow_upward
1
arrow_downward

вот код, который я написал недавно. Он не только проверяет шаблон телефона, но и автоматически добавляет скобки и тире при вводе чисел.

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;
}

и ввод:

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