gp-crm-ui/directives/crm-phone-mask.directive.ts

Модуль компонентов UI Имя модуля: `gp-crm-ui`

import * as Inputmask from 'inputmask/dist/inputmask/inputmask.phone.extensions';

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

import {
	Directive,
	ElementRef,
	OnInit,
} from '@angular/core';

// Директива - маска ввода номера телефона
@Directive({
	selector: '[crmPhoneMask]'
})
export class CrmPhoneMaskDirective implements OnInit {

	constructor(
		private readonly el: ElementRef,
		private readonly control: NgControl,
	) {
		this.mask = Inputmask(this.SETTINGS)
			.mask(this.el.nativeElement);
	}

	// Маска
	private readonly mask: Inputmask;

	// Параметры маски
	private readonly SETTINGS = {
		mask: '+7 (999) 999-99-99',
		autoUnmask: true,
		onBeforePaste: this.onBeforePaste.bind(this),
	};

	// Инициализация
	public ngOnInit(): void {
		(this.control.control as any).inputmask = this.mask;
	}

	// Обработчик вставки текста в поле ввода маски
	private onBeforePaste(pastedValue: string): string {
		let processedValue = pastedValue;
		const phoneNum = pastedValue.replace(/\D+/g, '');
		const internationalPhoneLength = 11;

		if (phoneNum.length === internationalPhoneLength) {
			processedValue = phoneNum.replace(/^[7|8]/, '');
		}

		return processedValue;
	}

}