如何将掩码应用于Typescript中的默认值

Question

我有一个mask-phone指令，当用户写入值时，它在输入中非常有效，但我需要设置一个默认值，而且我不知道如何在组件方法中应用mask指令。该值显示在不带掩码的输入中，只有当我修改该值时，掩码才会出现。

我遇到的问题是，在德国，电话号码有几种可能性，所以我不能在默认值中设置特定的掩码，例如：(49((170(-111111(49((1514(-111111(49((25679(-111111

我写了一个例子，你可以在下面的链接中看到：https://stackblitz.com/edit/angular5-phone-mask-directive-roeqfk?file=app/app.component.ts

提前感谢：(

Answer 1

您可以从指令内部提供默认值，并在OnInit生命周期挂钩中设置掩码。这还有一个好处，即每次使用此指令时，默认值都是相同的。

代码：

import {Directive, ElementRef, HostListener, OnInit} from '@angular/core';
import {NgControl} from '@angular/forms';
@Directive({
selector: '[formControlName][appPhoneMask]'
})
export class PhoneMaskDirective implements OnInit{
defaultValue: string = '4912345678'
constructor(public ngControl: NgControl, private elementRef: ElementRef) { }
ngOnInit(): void {
this.applyMask(this.defaultValue)
}
@HostListener('ngModelChange', ['$event'])
onModelChange(event): void {
this.onInputChange(event, false);
}
@HostListener('keydown.backspace', ['$event'])
keydownBackspace(event): void {
this.onInputChange(event.target.value, true);
}
onInputChange(event, backspace): void {
let newVal = event.replace(/D/g, '');
if (backspace && newVal.length <= 6) {
newVal = newVal.substring(0, newVal.length - 1);
}

this.applyMask(newVal)
}
applyMask (value): void {
if (value.length === 0) {
value = '';
} else if (value.length <= 3) {
value = value.replace(/^(d{0,2})/, '($1)');
} else if (value.length <= 6) {
value = value.replace(/^(d{0,2})(d{0,3})/, '($1) ($2)');
} else if (value.length <= 12) {
value = value.replace(/^(d{0,2})(d{0,3})(d{0,7})/, '($1) ($2)-$3');
} else if (value.length <= 13) {
value = value.replace(/^(d{0,2})(d{0,4})(d{0,7})/, '($1) ($2)-$3');
} else if (value.length <= 14) {
value = value.replace(/^(d{0,2})(d{0,5})(d{0,7})/, '($1) ($2)-$3');
} else {
value = value.substring(0, 14);
value = value.replace(/^(d{0,2})(d{0,5})(d{0,7})/, '($1) ($2)-$3');
}
this.ngControl.valueAccessor.writeValue(value);
}
/** This method allows to keep the formControl value without the mask, in order to use it in backend queries */
@HostListener('input') onChange(): void {
const newVal = this.elementRef.nativeElement.value.replace(/D/g, '');
this.ngControl.control.setValue(newVal, {
emitEvent: false,
emitModelToViewChange: false,
emitViewToModelChange: false
});
}
}