Возможно ли иметь управляемую моделью форму в Angular 2 и реализовать директиву, которая позволила бы маскировать поле input например запись телефонного номера (123) 123-4567?
Маска для входа, чтобы разрешить номера телефонов?
Ответ 1
Angular5 и 6:
Для угловых 5 и 6 рекомендуется использовать @HostBindings и @HostListeners вместо свойства host
удалить хост и добавить @HostListener
@HostListener('ngModelChange', ['$event'])
onModelChange(event) {
this.onInputChange(event, false);
}
@HostListener('keydown.backspace', ['$event'])
keydownBackspace(event) {
this.onInputChange(event.target.value, true);
}
Работает в сети Stackblitz Ссылка: https://angular6-phone-mask.stackblitz.io
Пример кода Stackblitz: https://stackblitz.com/edit/angular6-phone-mask
Официальная ссылка на документацию https://angular.io/guide/attribute-directives#respond-to-user-initiated-events
Angular2 и 4:
оригинал
Один из способов сделать это - использовать директиву, которая внедряет NgControl и манипулирует значением
(подробнее см. встроенные комментарии)
@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: ['']
})
}
}
Ответ 2
Angular 4 +
Я создал общую директиву, способную получать любую маску, а также способную определять маску динамически на основе значения:
mask.directive.ts:
import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/core';
import { NgControl } from '@angular/forms';
import { MaskGenerator } from '../interfaces/mask-generator.interface';
@Directive({
selector: '[spMask]'
})
export class MaskDirective {
private static readonly ALPHA = 'A';
private static readonly NUMERIC = '9';
private static readonly ALPHANUMERIC = '?';
private static readonly REGEX_MAP = new Map([
[MaskDirective.ALPHA, /\w/],
[MaskDirective.NUMERIC, /\d/],
[MaskDirective.ALPHANUMERIC, /\w|\d/],
]);
private value: string = null;
private displayValue: string = null;
@Input('spMask')
public maskGenerator: MaskGenerator;
@Input('spKeepMask')
public keepMask: boolean;
@Input('spMaskValue')
public set maskValue(value: string) {
if (value !== this.value) {
this.value = value;
this.defineValue();
}
};
@Output('spMaskValueChange')
public changeEmitter = new EventEmitter<string>();
@HostListener('input', ['$event'])
public onInput(event: { target: { value?: string }}): void {
let target = event.target;
let value = target.value;
this.onValueChange(value);
}
constructor(private ngControl: NgControl) { }
private updateValue(value: string) {
this.value = value;
this.changeEmitter.emit(value);
MaskDirective.delay().then(
() => this.ngControl.control.updateValueAndValidity()
);
}
private defineValue() {
let value: string = this.value;
let displayValue: string = null;
if (this.maskGenerator) {
let mask = this.maskGenerator.generateMask(value);
if (value != null) {
displayValue = MaskDirective.mask(value, mask);
value = MaskDirective.processValue(displayValue, mask, this.keepMask);
}
} else {
displayValue = this.value;
}
MaskDirective.delay().then(() => {
if (this.displayValue !== displayValue) {
this.displayValue = displayValue;
this.ngControl.control.setValue(displayValue);
return MaskDirective.delay();
}
}).then(() => {
if (value != this.value) {
return this.updateValue(value);
}
});
}
private onValueChange(newValue: string) {
if (newValue !== this.displayValue) {
let displayValue = newValue;
let value = newValue;
if ((newValue == null) || (newValue.trim() === '')) {
value = null;
} else if (this.maskGenerator) {
let mask = this.maskGenerator.generateMask(newValue);
displayValue = MaskDirective.mask(newValue, mask);
value = MaskDirective.processValue(displayValue, mask, this.keepMask);
}
this.displayValue = displayValue;
if (newValue !== displayValue) {
this.ngControl.control.setValue(displayValue);
}
if (value !== this.value) {
this.updateValue(value);
}
}
}
private static processValue(displayValue: string, mask: string, keepMask: boolean) {
let value = keepMask ? displayValue : MaskDirective.unmask(displayValue, mask);
return value
}
private static mask(value: string, mask: string): string {
value = value.toString();
let len = value.length;
let maskLen = mask.length;
let pos = 0;
let newValue = '';
for (let i = 0; i < Math.min(len, maskLen); i++) {
let maskChar = mask.charAt(i);
let newChar = value.charAt(pos);
let regex: RegExp = MaskDirective.REGEX_MAP.get(maskChar);
if (regex) {
pos++;
if (regex.test(newChar)) {
newValue += newChar;
} else {
i--;
len--;
}
} else {
if (maskChar === newChar) {
pos++;
} else {
len++;
}
newValue += maskChar;
}
}
return newValue;
}
private static unmask(maskedValue: string, mask: string): string {
let maskLen = (mask && mask.length) || 0;
return maskedValue.split('').filter(
(currChar, idx) => (idx < maskLen) && MaskDirective.REGEX_MAP.has(mask[idx])
).join('');
}
private static delay(ms: number = 0): Promise<void> {
return new Promise(resolve => setTimeout(() => resolve(), ms)).then(() => null);
}
}
(Не забудьте объявить его в своем NgModule)
Числовой символ в маске 9, поэтому ваша маска будет (999) 999-9999. Вы можете изменить статическое поле NUMERIC, если хотите (если вы измените его на 0, ваша маска должна быть (000) 000-0000, например).
Значение отображается с маской, но сохраняется в поле компонента без маски (это желательное поведение в моем случае). Вы можете сохранить его в маске с помощью [spKeepMask]="true".
Директива получает объект, реализующий интерфейс MaskGenerator.
маска-generator.interface.ts:
export interface MaskGenerator {
generateMask: (value: string) => string;
}
Таким образом, возможно определить маску динамически на основе значения (например, кредитных карт).
Я создал утилитарный класс для хранения масок, но вы также можете указать его прямо в своем компоненте.
мой-mask.util.ts:
export class MyMaskUtil {
private static PHONE_SMALL = '(999) 999-9999';
private static PHONE_BIG = '(999) 9999-9999';
private static CPF = '999.999.999-99';
private static CNPJ = '99.999.999/9999-99';
public static PHONE_MASK_GENERATOR: MaskGenerator = {
generateMask: () => MyMaskUtil.PHONE_SMALL,
}
public static DYNAMIC_PHONE_MASK_GENERATOR: MaskGenerator = {
generateMask: (value: string) => {
return MyMaskUtil.hasMoreDigits(value, MyMaskUtil.PHONE_SMALL) ?
MyMaskUtil.PHONE_BIG :
MyMaskUtil.PHONE_SMALL;
},
}
public static CPF_MASK_GENERATOR: MaskGenerator = {
generateMask: () => MyMaskUtil.CPF,
}
public static CNPJ_MASK_GENERATOR: MaskGenerator = {
generateMask: () => MyMaskUtil.CNPJ,
}
public static PERSON_MASK_GENERATOR: MaskGenerator = {
generateMask: (value: string) => {
return MyMaskUtil.hasMoreDigits(value, MyMaskUtil.CPF) ?
MyMaskUtil.CNPJ :
MyMaskUtil.CPF;
},
}
private static hasMoreDigits(v01: string, v02: string): boolean {
let d01 = this.onlyDigits(v01);
let d02 = this.onlyDigits(v02);
let len01 = (d01 && d01.length) || 0;
let len02 = (d02 && d02.length) || 0;
let moreDigits = (len01 > len02);
return moreDigits;
}
private static onlyDigits(value: string): string {
let onlyDigits = (value != null) ? value.replace(/\D/g, '') : null;
return onlyDigits;
}
}
Затем вы можете использовать его в своем компоненте (используйте spMaskValue вместо ngModel, но если это не реактивная форма, используйте ngModel с ничем, как в приведенном ниже примере, просто так, чтобы вы не получить ошибку от провайдера из-за введенного NgControl в директиве, в реактивных формах вам не нужно включать ngModel):
my.component.ts:
@Component({ ... })
export class MyComponent {
public phoneValue01: string = '1231234567';
public phoneValue02: string;
public phoneMask01 = MyMaskUtil.PHONE_MASK_GENERATOR;
public phoneMask02 = MyMaskUtil.DYNAMIC_PHONE_MASK_GENERATOR;
}
my.component.html:
<span>Phone 01 ({{ phoneValue01 }}):</span><br>
<input type="text" [(spMaskValue)]="phoneValue01" [spMask]="phoneMask01" ngModel>
<br><br>
<span>Phone 02 ({{ phoneValue02 }}):</span><br>
<input type="text" [(spMaskValue)]="phoneValue02" [spMask]="phoneMask02" [spKeepMask]="true" ngModel>
(Посмотрите на phone02 и посмотрите, что когда вы набираете еще 1 цифру, изменяется маска, также смотрите, что значение, сохраненное в phone01, не имеет маски)
Я тестировал его с нормальными входами, а также с входами ionic (ion-input), причем оба реактивных (с formControlName, а не с formControl) и нереактивными формами.
Ответ 3
Я использую TextMaskModule из angular2 -text-mask
Мины разделены, но вы можете получить идею
Пакет с использованием NPM NodeJS
"dependencies": {
"angular2-text-mask": "8.0.0",
HTML
<input *ngIf="column?.type =='areaCode'" type="text" [textMask]="{mask: areaCodeMask}" [(ngModel)]="areaCodeModel">
<input *ngIf="column?.type =='phone'" type="text" [textMask]="{mask: phoneMask}" [(ngModel)]="phoneModel">
Внутренний компонент
public areaCodeModel = '';
public areaCodeMask = ['(', /[1-9]/, /\d/, /\d/, ')'];
public phoneModel = '';
public phoneMask = [/\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/];
Ответ 4
Реактивная форма
В дополнение к ответу @Günter Zöchbauer, приведенному выше, я попытался сделать следующее, и это, похоже, работает, но я не уверен, является ли это эффективным способом.
Я использую valueChanges наблюдаемые для прослушивания изменений в реактивной форме, подписавшись на нее. Для специальной обработки backspace я получаю data из подписки и проверяю их с помощью userForm.value.phone(from [formGroup]="userForm"). Потому что в этот момент данные изменяются на новое значение, а последнее ссылается на предыдущее значение, поскольку еще не установлено. Если данные меньше предыдущего значения, тогда пользователь должен удалить символ из ввода. В этом случае измените шаблон следующим образом:
from: newVal = newVal.replace(/^(\d{0,3})/, '($1)');
to: newVal = newVal.replace(/^(\d{0,3})/, '($1');
В противном случае, как упоминал Гюнтер Цохбауэр, удаление нечисловых символов не распознается, поскольку при удалении скобок из ввода цифры остаются прежними и снова добавляются скобки из сопоставления с образцом.
контроллер:
import { Component,OnInit } from '@angular/core';
import { FormGroup,FormBuilder,AbstractControl,Validators } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
constructor(private fb:FormBuilder) {
this.createForm();
}
createForm(){
this.userForm = this.fb.group({
phone:['',[Validators.pattern(/^\(\d{3}\)\s\d{3}-\d{4}$/),Validators.required]],
});
}
ngOnInit() {
this.phoneValidate();
}
phoneValidate(){
const phoneControl:AbstractControl = this.userForm.controls['phone'];
phoneControl.valueChanges.subscribe(data => {
/**the most of code from @Günter Zöchbauer answer.*/
/**we remove from input but:
@preInputValue still keep the previous value because of not setting.
*/
let preInputValue:string = this.userForm.value.phone;
let lastChar:string = preInputValue.substr(preInputValue.length - 1);
var newVal = data.replace(/\D/g, '');
//when removed value from input
if (data.length < preInputValue.length) {
/**while removing if we encounter ) character,
then remove the last digit too.*/
if(lastChar == ')'){
newVal = newVal.substr(0,newVal.length-1);
}
if (newVal.length == 0) {
newVal = '';
}
else if (newVal.length <= 3) {
/**when removing, we change pattern match.
"otherwise deleting of non-numeric characters is not recognized"*/
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');
}
//when typed value in input
} else{
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 {
newVal = newVal.replace(/^(\d{0,3})(\d{0,3})(.*)/, '($1) $2-$3');
}
}
this.userForm.controls['phone'].setValue(newVal,{emitEvent: false});
});
}
}
Шаблон:
<form [formGroup]="userForm" novalidate>
<div class="form-group">
<label for="tel">Tel:</label>
<input id="tel" formControlName="phone" maxlength="14">
</div>
<button [disabled]="userForm.status == 'INVALID'" type="submit">Send</button>
</form>
ОБНОВИТЬ
Есть ли способ сохранить позицию курсора при возврате в середине строки? В настоящее время он прыгает обратно до конца.
Определите id <input id="tel" formControlName="phone" #phoneRef> и renderer2 # selectRootElement, чтобы получить собственный элемент в компоненте.
Таким образом, мы можем получить позицию курсора используя:
let start = this.renderer.selectRootElement('#tel').selectionStart;
let end = this.renderer.selectRootElement('#tel').selectionEnd;
и затем мы можем применить его после того, как ввод будет обновлен до нового значения:
this.userForm.controls['phone'].setValue(newVal,{emitEvent: false});
//keep cursor the appropriate position after setting the input above.
this.renderer.selectRootElement('#tel').setSelectionRange(start,end);
ОБНОВЛЕНИЕ 2
Вероятно, лучше поместить такую логику в директиву, а не в компонент
Я также положил логику в директиву. Это облегчает применение его к другим элементам.
Примечание: это характерно для шаблона (123) 123-4567.
Ответ 5
Это можно сделать с помощью директивы. Ниже находится плунжер входной маски, которую я построил.
https://plnkr.co/edit/hRsmd0EKci6rjGmnYFRr?p=preview
код:
import {Directive, Attribute, ElementRef, OnInit, OnChanges, Input, SimpleChange } from 'angular2/core';
import {NgControl, DefaultValueAccessor} from 'angular2/common';
@Directive({
selector: '[mask-input]',
host: {
//'(keyup)': 'onInputChange()',
'(click)': 'setInitialCaretPosition()'
},
inputs: ['modify'],
providers: [DefaultValueAccessor]
})
export class MaskDirective implements OnChanges {
maskPattern: string;
placeHolderCounts: any;
dividers: string[];
modelValue: string;
viewValue: string;
intialCaretPos: any;
numOfChar: any;
@Input() modify: any;
constructor(public model: NgControl, public ele: ElementRef, @Attribute("mask-input") maskPattern: string) {
this.dividers = maskPattern.replace(/\*/g, "").split("");
this.dividers.push("_");
this.generatePattern(maskPattern);
this.numOfChar = 0;
}
ngOnChanges(changes: { [propertyName: string]: SimpleChange }) {
this.onInputChange(changes);
}
onInputChange(changes: { [propertyName: string]: SimpleChange }) {
this.modelValue = this.getModelValue();
var caretPosition = this.ele.nativeElement.selectionStart;
if (this.viewValue != null) {
this.numOfChar = this.getNumberOfChar(caretPosition);
}
var stringToFormat = this.modelValue;
if (stringToFormat.length < 10) {
stringToFormat = this.padString(stringToFormat);
}
this.viewValue = this.format(stringToFormat);
if (this.viewValue != null) {
caretPosition = this.setCaretPosition(this.numOfChar);
}
this.model.viewToModelUpdate(this.modelValue);
this.model.valueAccessor.writeValue(this.viewValue);
this.ele.nativeElement.selectionStart = caretPosition;
this.ele.nativeElement.selectionEnd = caretPosition;
}
generatePattern(patternString) {
this.placeHolderCounts = (patternString.match(/\*/g) || []).length;
for (var i = 0; i < this.placeHolderCounts; i++) {
patternString = patternString.replace('*', "{" + i + "}");
}
this.maskPattern = patternString;
}
format(s) {
var formattedString = this.maskPattern;
for (var i = 0; i < this.placeHolderCounts; i++) {
formattedString = formattedString.replace("{" + i + "}", s.charAt(i));
}
return formattedString;
}
padString(s) {
var pad = "__________";
return (s + pad).substring(0, pad.length);
}
getModelValue() {
var modelValue = this.model.value;
if (modelValue == null) {
return "";
}
for (var i = 0; i < this.dividers.length; i++) {
while (modelValue.indexOf(this.dividers[i]) > -1) {
modelValue = modelValue.replace(this.dividers[i], "");
}
}
return modelValue;
}
setInitialCaretPosition() {
var caretPosition = this.setCaretPosition(this.modelValue.length);
this.ele.nativeElement.selectionStart = caretPosition;
this.ele.nativeElement.selectionEnd = caretPosition;
}
setCaretPosition(num) {
var notDivider = true;
var caretPos = 1;
for (; num > 0; caretPos++) {
var ch = this.viewValue.charAt(caretPos);
if (!this.isDivider(ch)) {
num--;
}
}
return caretPos;
}
isDivider(ch) {
for (var i = 0; i < this.dividers.length; i++) {
if (ch == this.dividers[i]) {
return true;
}
}
}
getNumberOfChar(pos) {
var num = 0;
var containDividers = false;
for (var i = 0; i < pos; i++) {
var ch = this.modify.charAt(i);
if (!this.isDivider(ch)) {
num++;
}
else {
containDividers = true;
}
}
if (containDividers) {
return num;
}
else {
return this.numOfChar;
}
}
}
Примечание. Есть еще несколько ошибок.
Ответ 6
Сочетая ответ Гюнтера Цохбауэра со старым добрым vanilla-JS, мы получаем директиву с двумя строчками логики, которая поддерживает формат (123) 456-7890.
Реактивные формы: Plunk
import { Directive, Output, EventEmitter } from "@angular/core";
import { NgControl } from "@angular/forms";
@Directive({
selector: '[formControlName][phone]',
host: {
'(ngModelChange)': 'onInputChange($event)'
}
})
export class PhoneMaskDirective {
@Output() rawChange:EventEmitter<string> = new EventEmitter<string>();
constructor(public model: NgControl) {}
onInputChange(value) {
var x = value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
var y = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
this.model.valueAccessor.writeValue(y);
this.rawChange.emit(rawValue);
}
}
Шаблонно-управляемые формы: Plunk
import { Directive } from "@angular/core";
import { NgControl } from "@angular/forms";
@Directive({
selector: '[ngModel][phone]',
host: {
'(ngModelChange)': 'onInputChange($event)'
}
})
export class PhoneMaskDirective {
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);
}
}
Ответ 7
Не нужно изобретать велосипед! Используйте Валютная маска, в отличие от TextMaskModule, эта работает с типом ввода номера и очень проста в настройке. Я обнаружил, что когда я сделал свою собственную директиву, мне пришлось продолжать преобразовывать число и строку в вычисления. Сэкономьте время. Здесь ссылка:
Ответ 8
Вы можете использовать cleave.js
// phone (123) 123-4567
var cleavePhone = new Cleave('.input-phone', {
//prefix: '(123)',
delimiters: ['(',') ','-'],
blocks: [0, 3, 3, 4]
});
Ответ 9
Думаю, самое простое решение - добавить маску ngx.
npm i --save ngx-mask
тогда вы можете сделать
<input type='text' mask='(000) 000-0000' >
ИЛИ ЖЕ
<p>{{ phoneVar | mask: '(000) 000-0000' }} </p>